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:
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.