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
精彩评论