Question

我正在创建一个具有此功能的切换按钮：http://pastebin.com/gLkeB7pi 然后我克隆这个切换按钮用于类似用途 - 但不完全相同。为此，我需要相同的“点击”行为（即，选择/取消选择＆amp;复选框），但需要在新的克隆按钮上。

所以我正在尝试这个：首先，我修改了createToggleButton：http://pastebin.com/tFZVafwE 基本上，我通过event.data将click参数传递给click处理程序，因此我修改了内部函数，以便选中新的toggle复选框。然后我这样做了：

var toggle = toggleButton.clone(true); //toggleButton is the toggle inside the div created with createToggleButton()
$(toggle).unbind('click');
$(toggle).bind('click',
    {chkbx: $(toggle).find('input[type=checkbox]')},
    function(evt){toggle.toggle(evt)}
);

然而，我无法弄清楚会发生什么。单击时，新的切换向上滑动（？！）并且根本不执行toggle.toggle功能（我添加了一个console.log）。所以：

1）我是否正在考虑做我想做的事情的正确方法？

2）在点击时实际执行了哪些代码？为什么？

Answer 1

关于切换代码，我不能说太多，但是如果你想复制一个处理程序，通常最好先将处理程序保存到变量中，f.ex：

var handler = function(e) {
    // do stuff
};

toggleButton.bind('click', { john: 'doe' }, handler);

// now clone, attach the same hander but pass some other data

var $clone = toggleButton.clone(); // don’t copy events
$clone.bind('click', { foo: 'bar' }, handler);

如果您想“找到”之前附加的处理程序，可以使用$._data，f.ex：

var handler = $._data( toggleButton[0], 'events' ).click[0].handler;

Answer 2

好的，我明白了。万一有人偶然发现同样的问题：

首先 - hacky且未经过测试 - 解决方案：如果您想（或需要）使用clone，请首先注意名为toggle的JS Object方法已经存在。在我的案例中，这是被调用的那个，而不是我创建的toggle.toggle。此外，我的createToggleButton函数中创建的方法不会与clone一起复制。因此，正如大卫所说，它与$._data( toggleButton[0], 'events' ).click[0].handler;的结合更好。即便如此，在我的情况下它也不会起作用，因为toggle.toggle调用toggle.active或toggle.deactive这两个都不存在于此上下文中。因此，有必要不在处理程序中调用任何辅助函数。

第二种解决方案（更好）：不要使用clone。重新使用createToggleButton并手动添加所需的HTML属性（请参阅jQuery: How to copy all the attributes of one element and apply them to another?）。

如何在clone（）之后用新参数重新绑定事件？

2 个答案: