Question

我的网站上有复选框，每个复选框代表一个事件名称。

我要绑定和取消绑定到beckbox上的事件库，在网站上加载所有checkboxex默认选中。这是我的代码：

var pusher = new Pusher('secret');
var channel = pusher.subscribe('latest-news');
$("input:checkbox[name=category]:checked").each(function()
{
    channel.bind($(this).val(), function(data) {
        getNews(data.id);
    });
});

function getNews(ids)
{
    $.post("show", {id: ids})
            .done(function(data) {
        $(".c").prepend(data);
    });
}

此代码对复选框的更改做出反应：

$(document).ready(function() {
    $('input:checkbox[name=category]').click(function() {
        var $this = $(this);
        // $this will contain a reference to the checkbox   
        if ($this.is(':checked')) {
            alert('yes');
            channel.bind($(this).val(), function(data) {
                getNews(data.id);
            });
        } else {
            alert('no');
            channel.unbind($(this).val(), function(data) {
            });
        }
    });
});

它运行正常问题是当有人取消选中一个复选框，然后再次检查发生了什么，他将每次收到两条消息。那么什么是动态绑定和取消绑定到事件而没有绑定两次到同一事件的正确方法。感谢

Answer 1

如您所见，channel.unbind function有两个参数：eventName和callback。 eventName是一个字符串，callback参数是一个函数引用。当您呼叫unbind时，您可能正在传递正确的eventName，但您正在传递对其他功能的引用，因此呼叫将失败。

要解决此问题，您应该拥有一个可以在绑定/解除绑定时引用和使用的函数：

$(document).ready(function() {
    $('input:checkbox[name=category]').click(function() {
        var $this = $(this);
        // $this will contain a reference to the checkbox   
        if ($this.is(':checked')) {
            alert('yes');
            channel.bind($(this).val(), handleEvent);
        } else {
            alert('no');
            channel.unbind($(this).val(), handleEvent);
        }
    });
});

function handleEvent( data ) {
  getNews( data.id );
}

参考文献：

如何在推送器上动态绑定和取消绑定事件

1 个答案: