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

Does jQuery selector work on selector that appears after Javascript code?

本文关键字：选择器 Javascript 代码 之后 是否 适用于 jQuery      更新时间：2023-09-26

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

这是我设置按钮的代码：

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

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

所以，你的问题的答案是：不，如果在加载脚本后附加元素（例如在文档就绪时），则此代码将不起作用。

但是你可以用jQuery:)轻松实现这一点： 

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

这篇文章中为您提供的完整解决方案（重复）：使用加载了 Ajax 内容的 jQuery "click"函数？

但是

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

因此，

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

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

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

尽管$('body'), $(document) or $(document.body)始终可用于委派事件。

如果您担心按钮未准备好的可能性，请尝试：

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

希望这有帮助，

相关文章：