jQuery 访问尚未加载到 DOM 中的元素

Question

如何编写一个作用于尚未加载到 DOM 中的元素的点击事件？

场景:

• native-btn 是在文档就绪时加载的 div。
• ajax-loaded-element 是 ajax 表单执行后出现的 div 一系列客户端事件

我的事件如下:

$(".native-btn").click(function() {
    $(".ajax-loaded-element").fadeOut();        
});

我似乎无法让 .ajax 加载的元素做出响应。我知道 .live() 已被弃用，并且 .on() 事件仅适用于直接与新插入的元素交互，而不是通过辅助操作对其进行操作。我还缺少 .on() 的另一种用法吗？

谢谢!

更新

我现在使用 .on() 事件来访问 . ajax 加载元素 div。然而，虽然它响应 .hide() 和 .css() 等基本事件，但它不响应 .trigger()，而这正是我最终需要它做的事情。

$(document).on("click", ".native-btn", function() { 
    $('.ajax-loaded-element').trigger('click'); 
    $('.ajax-loaded-element').css("background-color","red"); 
});

背景变为红色，但触发器不触发。我应该补充一点，CMS 加载的 .ajax-loaded-element 的默认功能在 ajax 表单上推进页面。我尝试远程触发它，因为我想在默认功能之前和之后添加自定义动画。

整个独家新闻

我在 Drupal 中使用多页面 Web 表单，它在页面上显示为一个 block 。因为我已为其分配了 ajax 客户端功能，所以它会动态插入“PREV”和“NEXT”div 以根据需要推进表单。

从用户体验的角度来看，我想淡出整个表单，让表单前进到下一页，然后淡入表单，而不是用户可能察觉不到的眨眼变化形式已经进步。我无法访问网络表单功能，因此我尝试使用 jQuery 和触发器来实现。基本标记是:

<div id='webform'>
    ...form code...
    <div class='ajax-loaded-next'>Next</div>
    <div class='ajax-loaded-prev'>Prev</div>
</div>

<div class='native-btn-next'>NEXT</div>
<div class='native-btn-prev'>PREV</div>

$(document).on("click", ".native-btn-next", function() { 
    $('#webform').fadeOut(); 
    $('#webform .ajax-loaded-next').trigger('click'); 
    $('#webform').fadeIn(); 
});

$(document).on("click", ".native-btn-prev", function() { 
    $('#webform').fadeOut(); 
    $('#webform .ajax-loaded-prev').trigger('click'); 
    $('#webform').fadeIn(); 
});

看起来像这样:(ajax NEXT/PREV 为白色，原生 NEXT/PREV 为黑色)

如您所见，它仅以“下一步”按钮开始，该按钮的作用就像一个 super 按钮。 Webform 淡出，ajax-loaded-next 触发点击，页面前进，Webform 淡入。

但是在第 02 页上，出现了 ajax-loaded-prev 按钮:

当表单加载时，这显然不在 DOM 中。我的 native-btn-prev 使网络表单淡入淡出，但不触发点击。

希望这是有道理的......

Answer 1

$(document).on('click', '.native-btn', function() {
    $(".ajax-loaded-element").fadeOut();        
});

这是动态插入元素的事件处理程序，您应该将 document 替换为最接近的非动态父元素。

请注意，您无法淡出不存在的内容。