JQuery click event target / button opens two dialogs
-
14-11-2019 - |
Question
I'm using asp.net webGrid in which i have two buttons which both open same dialog (with different content) and a dialog which is supposed to open only when clicked on the current row (not from button clicks). I have this if else which checks if the clicked element is a button or not.
The problem is that this works fine the first time after loading the page. If i click only the buttons it opens the correct dialog. But after first time clicking a row, button clicks now open both dialogs at once.
Here's the code,
$('#grid').click(function(e){
if($(e.target).is(':button'))
{
$('.edit-db').live('click', function () {
$.getJSON('/Methods/dbQuery/' + $(this).attr('id'), function (data) {
var lista = data;
$('#edit-id').val(lista.id);
$('#edit-nimi').val(lista.nimi);
$('#edit-ip').val(lista.ip);
});
$('#action-type').val('edit');
tyyppi = 'edit';
$("#edit").show();
$("#delete").hide();
$('#dialog-edit').dialog('open');
});
$('.delete-row').live('click', function () {
$.getJSON('/Methods/dbQuery/' + $(this).attr('id'), function (data) {
var lista = data;
$('#edit-id').val(lista.id);
});
$('#action-type').val('delete');
$("#edit").hide();
$("#delete").show();
$('#dialog-edit').dialog('open');
});
}
else
{
$('tbody tr').live('hover', function () {
id = $(this).find('td:first').text();
$(this).toggleClass('clickable');
}).live('click', function () {
$("#devInfo").load("deviceInfo.cshtml/" + id).dialog('open');
});
}
});
Solution
You don't need the click handler around the live()
method calls. Because you have one, the live()
is being repeatedly set on those elements after each click.
The is(':button')
check is redundant as a tr
element can never be a button anyway.
Also, live()
has been deprecated. If you are using jQuery 1.7+ you should use on()
, otherwise you should use delegate()
.
Try this:
$('#grid').delegate('.edit-db', 'click', function (e) {
e.stopPropagation();
$.getJSON('/Methods/dbQuery/' + $(this).attr('id'), function (data) {
var lista = data;
$('#edit-id').val(lista.id);
$('#edit-nimi').val(lista.nimi);
$('#edit-ip').val(lista.ip);
});
$('#action-type').val('edit');
tyyppi = 'edit';
$("#edit").show();
$("#delete").hide();
$('#dialog-edit').dialog('open');
});
.delegate('.delete-row', 'click', function (e) {
e.stopPropagation();
$.getJSON('/Methods/dbQuery/' + $(this).attr('id'), function (data) {
var lista = data;
$('#edit-id').val(lista.id);
});
$('#action-type').val('delete');
$("#edit").hide();
$("#delete").show();
$('#dialog-edit').dialog('open');
});
.delegate('tbody tr', 'hover', function () {
id = $(this).find('td:first').text();
$(this).toggleClass('clickable');
})
.delegate('tbody tr', 'click', function () {
$("#devInfo").load("deviceInfo.cshtml/" + id).dialog('open');
});