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'); 
});