开发者

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

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

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜