jQuery的。不是（）和：不是（）不工作

Question

我將有一個link「編輯」，您可以點擊修改某些字段。現在點擊鏈接後，編輯鏈接應禁用。我試圖通過添加類editing來實現。所以，如果.not('.editing')運行的代碼的其餘部分...但我可以點擊兩次

我做了什麼錯？感謝您的收看，並幫助 - >Fiddle http://jsfiddle.net/s1v8n2Ld/

$('.edit-product').not('.editing').on('click', function(e){ 
    e.preventDefault(); 
    $(this).addClass("editing") 
    var $table = $(this).closest('table'); 
    $table.find('.editable').each(function(i){ 
     var content = $(this).html().trim(); 
     $(this).wrapInner('<input type="text" name="" placeholder="'+content+'">'); 
    }); 
}); 

$('.edit-product2:not(.editing)').on('click', function(e){ 
    e.preventDefault(); 
    $(this).addClass("editing") 
    var $table = $(this).closest('table'); 
    $table.find('.editable').addClass('xxxx'); 
    $table.find('.editable').each(function(i){ 
     var content = $(this).html().trim(); 
     $(this).wrapInner('<input type="text" name="" placeholder="'+content+'">'); 
    }); 
}); 



<table border="1" style="border-collapse:collapse;"> 
    <tr> 
     <td> 
      ID 
     </td> 
     <td> 
      18 
     </td> 
     <td rowspan="4"> 
      <a href="/app_dev.php/edit/ 18" class="edit-product">Edit</a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Name 
     </td> 
     <td class="editable"> 
      New product name! 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Price 
     </td> 
     <td class="editable"> 
      19.99 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Description 
     </td> 
     <td class="editable"> 
      Lorem ipsum dolor 
     </td> 
    </tr> 
</table> 




<table border="1" style="border-collapse:collapse;"> 
    <tr> 
     <td> 
      ID 
     </td> 
     <td> 
      18 
     </td> 
     <td rowspan="4"> 
      <a href="/app_dev.php/edit/ 18" class="edit-product2">Edit</a> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Name 
     </td> 
     <td class="editable"> 
      New product name! 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Price 
     </td> 
     <td class="editable"> 
      19.99 
     </td> 
    </tr> 
    <tr> 
     <td> 
      Description 
     </td> 
     <td class="editable"> 
      Lorem ipsum dolor 
     </td> 
    </tr> 
</table> 

Answer 1

的DOM加載

$(document).on('click','.edit-product:not(.editing)' 

或者像後，您需要事件代表團因爲類.editing添加的@卡爾 - 安德烈·加格農指出，在評論

檢查元素是否在處理程序內部具有編輯類。

$('.edit-product').on('click', function(e){ 
    if(!$(this).hasClass('editing')){ 

Answer 2

你需要使用jQuery的event.stopPropagation（）函數，它 冒泡DOM樹，阻止任何父處理程序被通知的事件阻止事件。

$('.edit-product').not('.editing').on('click', function(e){ 
e.stopPropagation();