我如何使用绑定和解除绑定？

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

Answer 2

代替 adding/removing 项目的点击事件，您可以使用事件委托将单个处理程序注册到共同的祖先上，然后只需检查点击的项目是否已添加到第二个列表中，使用在 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>

我如何使用绑定和解除绑定？

How can I use bind and unbind with this?

javascript

jquery

bind

unbind