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();