CODEWITHSUNDEEP
javascriptjqueryjquery-selectorsjquery-events
Andre Dublin
Andre Dublin

Reputation: 1158

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;
});

Upvotes: 0

Views: 440

Answers (2)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

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

Upvotes: 0

rajasaur
rajasaur

Reputation: 5460

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

Upvotes: 1

Related Questions