Question

当我运行代码时，click事件第一次起作用。当我点击它多一次时，似乎点击甚至无限制。如何保持点击事件的有效性？

var Categories = function() {
        $("select[id^='CategoryListBox-']").click(
        function() {
            SelectedItem = $(this).val();
            $(this).parent().load('/Categories/CategoryPicker?CatID=' + SelectedItem);

            //send CatID to the requesting page
            $('form#SubmitPost').prepend('<input id="CatID" name="CatID" type="hidden" value="' + SelectedItem + '" />');
        });
    }

    Categories();

Answer 1

您正在通过替换其父元素中的dom来覆盖单击处理程序。您可以使用live代替始终保持绑定。

第2行将是：

$("select[id^='CategoryListBox-']").live('click',

那应该这样做

Answer 2

看起来您正在使用AJAX从服务器加载新的HTML，并且您正在用新的选择框覆盖现有的选择框。这将删除事件侦听器。一种解决方案是使用live()：

$("select[id^='CategoryListBox-']").live("click", function() {
  SelectedItem = $(this).val();
  $(this).parent().load('/Categories/CategoryPicker?CatID=' + SelectedItem);

  //send CatID to the requesting page
  $('form#SubmitPost').prepend('<input id="CatID" name="CatID" type="hidden" value="' + SelectedItem + '" />');
});

一个建议：不要使用像这样的属性选择器。给所有相关的选择框一个类“类别”，然后执行：

$("select.category").live("click", function() { ... }

它快得多。

最后，这是创建隐藏输入的更好方法：

$("<input>").attr({id: "CatID", name: "CatID", type: "hidden", value: SelectedItem}).prependTo("#SubmitPost");

原因在于它直接创建DOM元素而不是解释HTML，这又慢得多。

Answer 3

您是否可能创建/重新创建对象，然后无法重新绑定事件？我有一个网站，我们进行了大量的AJAX更新（使用jQuery taconite插件），我们做的最后一件事就是在新创建的DOM对象上显式绑定click事件。

Answer 4

我认为当你将（）加载到parent（）时，你将用新的元素替换原始的CategoryListBox- *元素。新的没有任何约束。你可以将函数重新绑定到新元素，这可能很难看，可能会让你进入一个令人讨厌的递归情况，或者你可以使用.live（）函数将Categories（）绑定到id为的任何DOM元素CategoryListBox- *。这看起来像是：

$("select[id^='CategoryListBox-']").live('click', function() { [body of your Categories() function] } );

http://api.jquery.com/live/

这将适用于jQuery 1.3+。如果你使用1.2，你应该升级或使用livequery插件来获得类似的功能。

jquery click事件保持解除绑定

4 个答案: