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

Multiple jQuery Event Listeners on a page

本文关键字：jQuery 事件 监听器 一个      更新时间：2023-09-26

我想学习如何编写更好的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
});
然而，这破坏了我构建的每个项目的编辑和删除功能。

我想知道是否有一种普遍的做法是用来解决这个问题的

为什么不把点击事件分配给你想要点击的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();
})

我认为正确的代码是:

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

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

$( "p" ).on( "test.something", function( event ) {
  alert( event.namespace );
});
https://api.jquery.com/event.namespace/

相关文章：