Question

我想学习如何编写更整洁，更易扩展的更好的jQuery代码。为方便起见，大多数教程始终使用理想的案例场景。

其中一个案例是页面上的事件侦听器。这些监听器加起来用户与页面交互的次数越多，这可能会导致问题，因此就像这种情况一样。

JS

/* Adding list item (Click of Button) */
  $(document.body).on('click','#submit-item',function(e) {
    var buttonText = $(this).attr('value');

    if(buttonText == 'Add Item') {
      var productName = $(this).siblings('.form-group').children('input[name="product_name"]').val();
      var productDesc = $(this).siblings('.form-group').children('textarea[name="product_description"]').val();

      $('.list-group-items').append('<li class="list-group-item">' + productName + '<span class="hidden-product-desc">' + productDesc + '</span><span class="glyphicon glyphicon-remove pull-right" aria-hidden="true"></span> <span class="glyphicon glyphicon-edit pull-right" aria-hidden="true"></span><input type="hidden" name="select_products[]" value="'+ productName +'|'+ productDesc +'"/></li>');
      $('.product_form').slideUp();
      alert('Item added!');
      buttonText = '';
      productName = '';
      productDesc = '';
    }
    e.stopPropagation();
    e.preventDefault();

  });

上面监听按钮上的点击事件并将项目添加到列表中。这是第一次工作正常。如果用户添加了另一个项目并单击该按钮，则会将该项目添加两次，依此类推。然后，第十次点击将导致将10个相同的项目添加到列表中。

到目前为止我做了什么：

e.stopPropagation();
e.preventDefault();

我认为这些可以防止这个问题。

我也尝试在目标之后添加“.off（）”，如下所示：

$(document.body).off().on('click','#submit-item',function(e) {
   // code here
});

然而，这会破坏我构建的每个项目的编辑和删除功能。

我想知道是否有一种常用的做法可以用来解决这个问题。

Answer 1

为什么不将click事件分配给要单击的btn？

$(".buyItembtn").on("click", function(event){
   //do something

   event.stopPropagation();
   event.preventDefault();
})

$(".removeItemBtn").on("click", function(event){
   //do something

   event.stopPropagation();
   event.preventDefault();
})


alt:

$("#submit-item .buyItembtn").on("click", function(event){
   //do something

   event.stopPropagation();
   event.preventDefault();
})

$("#submit-item .removeItemBtn").on("click", function(event){
   //do something

   event.stopPropagation();
   event.preventDefault();
})

Answer 2

我认为正确的代码是：

$( document.body).on( "click",'#submit-item', function( event ) {
 // code here
  $( this ).off( event );
});

Answer 3

您可以使用事件命名空间并添加/删除特定的侦听器。

$( "p" ).on( "test.something", function( event ) {
  alert( event.namespace );
});

https://api.jquery.com/event.namespace/

页面上有多个jQuery事件监听器

3 个答案: