如何将“切换”事件绑定到元素？

Question

有没有办法使用“bind”语法来绑定“toggle”事件处理程序？

从文档中我可以理解正确的方法是：

$('.selector').toggle( function() {}, function() {} );

我的问题是，由于某些原因，我正在删除该元素，然后再将其添加到DOM中。但是，再次添加后，切换不起作用。

因此，我认为应该有一种方法来“绑定”切换。

请帮忙解决。

这是我正在遵循的文档： http://jqapi.com/#p=toggle

- Hrishikesh Choudhari

Answer 1

你必须使用.live()或.delegate()来为所有现有和未来的元素添加处理程序。

问题在于.toggle()绑定了click事件，在复杂情况下，如使用.live()或.delegate()，你需要自己编写代码。从jQuery文档中可以看到：

为了方便起见，提供了.toggle()方法。通过手动实现相同的行为相对容易，如果内置的.toggle()方法限制了某些假设，则可能需要手动实现。

自己编写切换函数（可以轻松地扩展为N个切换函数，使用mod N而不是mod 2 - 但是这时必须使用switch而不是JS条件运算符）：

var counter = 1;
$('.selector').live("click", function() {
    counter++ % 2 ? 
        // First set of actions :
        // Second set of actions;            
});

如果您想要包含2个函数，那么它们必须是自执行的。这对于传递参数非常有用...因此表单应该是：

var counter = 1;
$('.selector').live("click", function() {
    counter++ % 2 ? 
        (function() { ... }()) :                            // <== First function
        (function() { ... }());                            // <== Second function
});

一个简单的例子（没有使用参数）：

(function() {
    var counter = 1;
    $('.selector').live("click", function() {
        counter++ % 2 ? 
            $("div").html("First one!") :
            $("div").html("Numero dos!");

        });
    $(function() {
        $("body").prepend('<input type="button" ' + 
                          'class="selector" value=" Click Me! " />');
    });
}());

在 jsFiddle 上试用一下

一个更复杂的例子（使用了参数）：

(function() {
    var counter = 1;
    $('.selector').live("click", function() {
        // Note that the self executing functions are only
        // necessary if you want to use arguments.
        counter++ % 2 ? 
            (function() {
                $("div").html("First one! Num: " + ($(event.target).index() + 1))
            }(event)) :
            (function() {
                $("div").html("Numero dos! Num: " + ($(event.target).index()+1))
            }(event));            
        });
    $(function() {
        $elie = $('<input type="button" class="selector" value="Click Me!" />');
        $elie.clone().prependTo("body");
        $elie.clone().prependTo("body");
        $elie.clone().prependTo("body");        
    });
}());

请在 jsFiddle 上试用

- Peter Ajtai

---

非常感谢您的详细分析和非常有帮助的代码。它确实帮了我大忙！ - Hrishikesh Choudhari

Answer 2

我的问题在于出于某种原因我删除了那个元素，然后又将其添加到DOM中。在再次添加时，切换不起作用。 我认为这取决于您如何删除元素。如果您使用 remove 函数，则所有事件和 jquery 数据也将从元素中删除。detach 函数则相反，使其成为删除您计划稍后重新插入文档中的元素的理想选择。

- Nikita Rybak

---

+1 建议使用 .detach()，因为这将允许原生使用 .toggle()。 - Peter Ajtai

Answer 3

参考： .bind，.trigger

$(function() {
  $('input').click(function() {
    $('#id').trigger('toggle')
  });
    $('#id').bind('toggle', function() {
       $(this).toggle()
    });
});

尝试这个示例：http://jsbin.com/ixapo4/2

- user372551

---

OP正在询问动态添加的元素。这种方法无法处理这些元素。来自OP的话：“我的问题是我因为某些原因删除了该元素，然后再次将其添加到DOM中”。 - Peter Ajtai

如果使用.detach()将元素从DOM中取出，则上述操作就没有必要了，因为可以直接在原始元素上使用.toggle()。 - Peter Ajtai

你可以看到操作问题的标题为“如何将'toggle'事件绑定到一个元素上”。 - user372551

如何将“toggle”事件绑定到元素是$(elementSelector).toggle();。换句话说，您的代码可以简化为==> $('input').click(function() { $('#id').toggle(); });。但这只是问题的标题。问题的正文描述了更多的问题。 - Peter Ajtai

Answer 4

尝试使用live函数。这里是文档链接：link text。希望对您有所帮助。

- rajakvk

---

使用jQuery的live()函数，每当一个新元素被添加到之前定义的选择器中，它将附加上你之前设定的事件。 ;) - pjnovas

.live() 绑定一个动作。.toggle() 是一个 jQuery 方法，它绑定了 click 动作。我不确定如何使用 .live() 来绑定 .toggle()。你能提供一个例子吗？ - Peter Ajtai