开发者

Fire click event on one element in a set of matched elements and not on matched elements

开发者 https://www.devze.com 2023-03-17 23:13 出处:网络
I\'m trying to figure out how to find when my anchor tag is clicked, how to prevent the set of matched elements not to fire.Here is my Javascript:

I'm trying to figure out how to find when my anchor tag is clicked, how to prevent the set of matched elements not to fire. Here is my Javascript:

//open the dialog box
$('.update').click(function (event) {
     var $target = event.target;
     if ($target == $target) {
    $('.update-form').dialog('open'开发者_如何学运维);
    console.log('yep');
     } else {
    console.log('nope');
     }

     return false;
});

Heres the HTML

<tbody>
    <tr>
        <th>Designer</th>
        <th>Style</th>
        <th>Color</th>
        <th>Size</th>
        <th>Detials</th>
        <th>Notes</th>
    </tr>
    <tr style="background-color: rgb(201, 201, 201); color: rgb(255, 255, 255); ">
        <td>JASZ COUTURE</td>
        <td>4210</td>
        <td>GOLD</td>
        <td>S</td>
        <td> STRAPPY STETCH COCKTAIL</td>
        <td></td>
        <td><a href="http://localhost:8888/lexsreg/index.php/#" class="update">UPDATE</a></td>

    </tr>
    <tr>
        <td>test</td>
        <td>4as451</td>
        <td>test</td>
        <td>test</td>
        <td>tes</td>
        <td>tes</td>
        <td><a href="http://localhost:8888/lexsreg/index.php/#" class="update">UPDATE</a></td>

    </tr>
</tbody>

I know that event.target is returning a value based on the index of the element with the matched set. How do I tell the other elements to not fire. Whats happens is, depending on the number of anchor tags with the class of update, will open that many modal windows. I just need one, not the whole bunch

//set the functions of the dialog box
$('.update-form').dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    draggable: false,
    resizable: false,
    buttons: {
        'Update': function() {
            //json will happen here
        },
        'Cancel': function() {
            $(this).dialog('close');
        }
    },
    close: function() {
        allFields.val('').removeClass('ui-state-error');
    }
});

Got a solution its ugly but it works Give the modal windows equal ids

$updateForm.each(function(index) {
    $(this).attr('id', index);
});

On click pass the event and get the current target id. Traverse the DOM tree and find the modal window whose id matches this.

//open the dialog box for the rows
$($btns).click(function(event) {
var target = event.currentTarget.id,
 form = $(this)
    .parent()
    .parent()
    .parent()
    .parent()
    .parent()
    .parent()
    .siblings()
    .children()
    .filter('#'+target);
    $(form).dialog('open');
    return false;
});


Instead of

if ($target == $target) {

try

if ($target == this) {

With your approach it would be true for all links which leads to multiple modals opening


Are you sure that since you are using a class $('.update-form').dialog('open'); you are not opening more than one dialog because there are more than one element with that class? i tested your code here and it seems to work:

http://jsfiddle.net/aMsbT/1/

EDIT - regarding your comment, to stop proapgation of the event you should use stopImmediatePropagation(), to know what part of the DOM triggers your event you should use, as you do event.target

0

精彩评论

暂无评论...
验证码 换一张
取 消