Цель/кнопка события щелчка JQuery открывает два диалоговых окна
-
14-11-2019 - |
Вопрос
Я использую asp.net webGrid, в котором у меня есть две кнопки, которые открывают одно и то же диалоговое окно (с разным содержимым), и диалоговое окно, которое должно открываться только при нажатии на текущую строку (а не при нажатии кнопок).У меня есть if else, который проверяет, является ли выбранный элемент кнопкой или нет.
Проблема в том, что это работает нормально в первый раз после загрузки страницы.Если я нажимаю только кнопки, открывается правильный диалог.Но после первого щелчка по строке нажатие кнопки теперь открывает оба диалога одновременно.
Вот код,
$('#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');
});
}
});
Решение
Вам не нужен обработчик кликов вокруг live()
вызовы методов.Потому что у вас есть один, live()
повторно устанавливается для этих элементов после каждого щелчка мыши.
А is(':button')
проверка является избыточной, так как tr
элемент в любом случае никогда не может быть кнопкой.
Также, live()
устарел.Если вы используете jQuery 1.7+, вам следует использовать on()
, в противном случае вам следует использовать delegate()
.
Попробуй это:
$('#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');
});