Question

我有一个主包装器html块，它包含所有必需的jquery函数。根据用户点击的内容，ajax调用会进行一些调用，并使用返回的html替换内部内容div。新位置HTML中的按钮不会从包装器html注册.click函数。点击它们什么都不做。

检查源，jquery函数仍然存在，因此不会删除或替换它们。

一些代码：

这是我正在使用的jquery函数。它检查按钮点击。如果是这样，它会进行调用，然后用返回的html替换内容div。这个新的html将替换包含前一个按钮的html，但它将包含具有相同id的自己的按钮。这个新按钮没有使用jquery函数注册它的点击次数。

jQuery("#newhtml").click(function() {
    var ajaxurl = "urltogetnewhtml";
    new Ajax.Request(ajaxurl, {
        method: 'post',
        onComplete: function(transport) {
           jQuery('#content').html(transport.responseText);
        }
    });
});

换句话说，它是第一次工作，但不是再次工作。单击“New Html”按钮，用新的html替换内容块，包括一个名为“New Html”的新按钮。即使jquery代码仍然存在，这个新按钮也不起作用。

Answer 1

你点击绑定是什么样的？如果要动态添加元素，则应使用委托事件。

例如：

$('#mybutton').on('click', function() { ... });

如果您使用.html（）创建#mybutton，则不会起作用。相反，使用：

$('#static_container').on('click', '#mybutton', function() { ... });

Answer 2

随着HTML的动态添加，.click功能将无效。添加HTML后，需要再次调用定义单击的函数。你可以使用

$('#container').html(data);

$('#container').on('click', '.thumbnail', function(event){
 // do stuff
});

Answer 3

点击功能在这里不起作用。使用jQuery.on()函数来绑定页面加载后添加的元素上的事件。您可以使用此功能绑定任何事件。有关详细信息，请访问：http://api.jquery.com/on/

当Click事件绑定在页面加载时加载的元素上。

您可以使用：

$("#dataTable tbody tr").on("click", function(event){
  alert($(this).text());
});

或

$("#dataTable tbody").on("click", "tr", function(event){
  alert($(this).text());
});

Answer 4

需要为新元素重新初始化处理程序。使用jQuery .on()引用已弃用的jQuery .live()方法，这些方法将为当前与您的选择器匹配的元素以及与选择器匹配的所有未来元素设置事件处理程序。或者你可以简单地重新开发你的ahndler，但是你现在正在这样做。

Answer 5

你需要使用＆＃34; on＆＃34; jQuery的功能绑定点击。 http://api.jquery.com/on/

例如$（＆＃34; div.innerHTML＆＃34;）。on（＆＃34; click＆＃34;，function（）{}）

＆＃34;上＆＃34;在事件发生时检查页面上是否存在特定元素。

Answer 6

因为您必须回忆一下click（）代码以将其注册到新项目中，它不会神奇地捡起它们。

更好的解决方案是使用on()

$("#wrapperId").on("click, ".childButton", function() { alert("foo"); } );

Html通过jQuery（'divname'）添加.html不能与.click函数一起使用

6 个答案: