简体   繁体   中英

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM