Question

我有Javascript代码应该在点击上做一些事情，但它没有做任何事情。它基本上是一个滑入的窗格上的按钮。当我点击按钮时，我希望会发生一些事情。但是，当AJAX调用完成时，会填充此按钮，因为AJAX调用正在获取包含该按钮的某些HTML。

这是我设置按钮的代码：

$("#btn-delete-setup").on("click", function() {
  console.log("clicked");
    _deleteFunction();
    //return false;
});

因为在从AJAX调用呈现该窗格和按钮之前加载了Javascript，这是否意味着该按钮不会响应我的.on("click")代码？我的按钮没有响应，因为当加载Javascript时，它还没有找到要绑定的按钮吗？

Answer 1

此按钮在AJAX调用完成时填充

因此，这是事件委派的完美案例，这意味着在加载页面时绑定事件在元素上是不可用的，因此您需要将事件委托给最近的静态父级：

$("closestStaticparent").on("click", "#btn-delete-setup" function(e){
     console.log("clicked");
     _deleteFunction();
     //return false;
});

$("closestStaticparent")是像任何div容器/包装器一样的页面元素，或者我会说在ajax调用之前在dom中的元素。

虽然$('body'), $(document) or $(document.body)始终可用于委派活动。

Answer 2

因此，您的问题的答案是：不，如果在加载脚本后附加元素（例如，在文档准备就绪），则此代码将无效。

但是您可以使用jQuery轻松实现这一目标:)：

$(document).on("click","#btn-delete-setup", function() {
    console.log("clicked");
    _deleteFunction();
    //return false;
});

此帖子提供了完整的解决方案（重复）：Using jQuery 'click' function that was loaded with Ajax content?

Answer 3

如果您担心按钮没有准备好，请尝试使用：

$(document).ready(function(){
$("#btn-delete-setup").on("click", function() {
  console.log("clicked");
    _deleteFunction();
    //return false;
});
});

希望这有帮助，

jQuery选择器是否适用于Javascript代码后出现的选择器？

3 个答案: