JQueryのクリックイベントターゲット/ボタンは2つのダイアログボックスを開きます

Question

私はasp.net webGridを使用していますが、私は同じダイアログ（異なるコンテンツを含む）と現在のクリック時にのみ開くダイアログボタンのクリックからではありません。クリックされた要素がボタンであるかどうかを調べるelse if elseがあります。

問題は、このページを読み込んだ後に初めてうまく動作することです。私がボタンだけをクリックすると、正しいダイアログが開きます。しかし、最初に行をクリックした後、ボタンクリックは両方のダイアログを同時に開きます。

は、ここであなたがlive()メソッド呼び出しの周りのクリックハンドラを必要としない

$('#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

、コードです。 1つ持っているので、クリックするたびにlive()がこれらの要素に繰り返し設定されています。

is(':button')チェックは冗長です。tr要素は決してボタンになることはありません。

また、live()は推奨されていません。 jQuery 1.7+を使用している場合は、on()を使用してください。そうでない場合はdelegate()を使用してください。まだ、同時に両方のダイアログ（#devInfoと＃ダイアログ編集）を開き、このボタン付き

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