Question

我有一个问题，如果一个div /列表中有多个按钮，则Button无法在javascript上单击（）。在这种情况下，如果我单击“添加”按钮，则无济于事。但是“删除”按钮可以。如果我删除js上的Delete函数，则添加按钮可以正常工作。怎么了？

我有这样的 HTML

<ul class="coll-list">
   <li>
      <button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
      <button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
   </li>
   
   <li>
      <button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
      <button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
   </li>
</ul>

和 JS函数：

 var id ="";
 
 $('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
       id = $(this).data('id'); 
       
       // doing ajax thing
});

 $('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
       id = $(this).data('id'); 
       
       // doing ajax thing
});

Answer 1

发生此问题是因为第二个$('.coll-list').off('click')删除了您之前设置的 ALL on('click')事件（在这种情况下，点击.btn-remove-coll）。

您可以尝试在页面中更改off('click').on('click')的顺序，您会看到这将更改工作按钮（或“删除”或“添加”）。

此处仅删除按钮有效

 
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
  alert("add")
});


 $('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
  alert("remove")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
   <li>
      <button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
      <button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
   </li>
   
   <li>
      <button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
      <button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
   </li>
</ul>

此处仅添加按钮

 $('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
  alert("remove")
});
 
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
  alert("add")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="coll-list">
   <li>
      <button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
      <button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
   </li>
   
   <li>
      <button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
      <button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
   </li>
</ul>

使两个按钮同时工作的两种可能解决方案是：

只需删除off('click')
组合1次on('click')中的2次点击

$('.coll-list').off('click').on('click','.btn-add-coll, .btn-remove-coll', function(e) {

  if($(this).hasClass("btn-add-coll")){
    alert("add")
  } else {
    alert("remove")
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
   <li>
      <button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
      <button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
   </li>
   
   <li>
      <button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
      <button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
   </li>
</ul>

Answer 2

请尝试使用.coll-list从JavaScript代码中更改.coll_list，因为这是您ul HTML标记的类。

修改出于某种原因，似乎不可能在同一<li>标签中具有两个不同div的点击功能。我建议您稍微更改一下HTML标记，并使用<div>标记代替<ul>。小提琴：jsfiddle.net/xpvt214o/592987

如果一个div /列表中有多个按钮，则按钮无法在JavaScript上单击（）

2 个答案: