JQuery单击事件目标/按钮打开两个对话框

Question

我正在使用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'); 
     }); 
    } 
}); 

Answer 1

你不需要绕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'); 
});