Question

我有两个点击功能，一个功能用于在列表中添加休假，另一个功能用于从列表中删除休假。当我在列表中添加休假时，我不希望再次点击该特定按钮.ledig-btn。如果我从列表中删除特定的假期，那么我希望能够再次单击.ledig-btn。我已尝试使用jQuery(this).off('click');并且正在使用它，但是当我从列表中删除休假时，我想再次添加点击事件。

jQuery(".ledig-btn").on('click', function(event) {
    var id = jQuery(this).attr('id');
    jQuery(this).unbind("click");
    jQuery('.minlista').append('<tr><td><div class="list-domains" data-id='+id+'><span class="delete-list-domains">X</span>' + '<td class="tld-sok">' + searchWord + '<div class="tld-sok-ilista">' + domain + '</div>' + '</td>' + '</div></td></tr>');
    event.stopImmediatePropagation();
    jQuery("tr td .list-domains").on('click', function(e) {
        var delRow = jQuery(e.target).closest('tr');
        delRow.remove();
    });
});

Answer 1

根据您的脚本，您将按钮ID存储为名为data-attribute的{{1}}，因此我们可以按照以下方式使用它：

data-id

Answer 2

您可以使用事件委派将单个处理程序注册到共同的祖先，而不是添加/删除项目上的click事件，然后只需检查已经添加到第二个列表中的已单击的项目，并提供帮助id属性和您使用的data-id。

以下是简化演示：

＆＃13;

jQuery("#available").on('click', '.ledig-btn', function(event) {
    var btn = jQuery(this), item = btn.closest('div'), id = item.attr('id');
    if ($('#added').find('[data-id="'+id+'"]').length){
      alert('Item already added to the list.');
      return;
    }
    jQuery('.minlista').append(`
      <tr>
        <td>
          <div class="list-domains" data-id=`+id+`>
            <span class="delete-list-domains">×</span>
          </div>
        </td><td class="tld-sok">` + item.text().replace('Add','')
        + '<div class="tld-sok-ilista">Some dynamic content</div></td></tr>'
    ).find(".list-domains").last().on('click', function(e) {
        jQuery(e.target).off('click').closest('tr').remove();
    });
    event.stopImmediatePropagation();
});

＆＃13;

#available, #added{float:left; width:50%; box-sizing: border-box; border: 1px solid black;
margin: 2px; min-height: 10px}
#available div{clear:both; vertical-align: middle}
#available button{float: right}
.delete-list-domains{cursor: pointer; padding:2px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
</p>
<div id="available">
  <div id="v1" class="vacation">Vacation 1<button class="ledig-btn">Add</button></div>
  <div id="v2" class="vacation">Vacation 2<button class="ledig-btn">Add</button></div>
  <div id="v3" class="vacation">Vacation 3<button class="ledig-btn">Add</button></div>
</div>

<div id="added">
  <table><tbody class="minlista">
  </tbody></table>
</div>

＆＃13;

我怎样才能使用bind和unbind？

2 个答案: