我如何使用绑定和取消绑定？答案

【问题标题】：How can I use bind and unbind with this?我如何使用绑定和取消绑定？
【发布时间】：2018-03-09 14:23:06
【问题描述】：

我有两个点击功能，一个是在列表中添加假期，另一个是从列表中删除假期。当我将假期添加到列表中时，我不想再次单击该特定按钮.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();
    });
});

【问题讨论】：

“从 jQuery 3.0 开始，.unbind() 已被弃用。自 jQuery 1.7 起它被 .off() 方法所取代，因此不鼓励使用它。”
@Andreas OP 说 我已经尝试过 jQuery(this).off('click');
好的，我明白了，我会使用 off 和 on，但是如何在我的代码中使用它呢？
你也可以发布 HTML 吗？

标签： javascript jquery bind unbind

【解决方案1】：

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

function myClickHandler(event) {
    var id = $(this).attr('id');

    $(this).off("click");

    //                                                       +--- Data attribute with the  
    //                                                       |    related 'ledig-btn'
    //                                                       v
    $('.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();

    $("tr td .list-domains").on('click', function(e) {
        var ledigBtnId = $(this).data('id'); // ledig-btn ID
        var delRow = $(e.target).closest('tr');
        delRow.remove();

        // Here we re-bind the click event handler.
        $("#" + ledigBtnId).on("click", myClickHandler);
    });
}

$(".ledig-btn").on('click', myClickHandler);

【讨论】：

【解决方案2】：

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

这是一个简化的演示：

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

#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}

<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>

【讨论】：