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

Question

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

方案：

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

我的活动如下：

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

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

谢谢！

更新

我现在正在使用.on（）事件来访问。 ajax-loaded-element 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表单上提升页面。我试图远程触发它，因为我想在默认功能之前和之后添加自定义动画。

整个SCOOP

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

从用户体验的角度来看，我希望淡化整个表单，让表单前进到下一页，然后淡化表单，而不是一眨眼的变化，其中用户可能没有察觉到形式有所提升。我无法访问webform功能，因此我尝试使用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是黑色）

正如您所看到的，它仅从“下一步”按钮开始，其效果类似于魅力。 Webform淡出，ajax加载的下一个触发器点击，页面前进，webform淡入。

但在第02页，ajax-loaded-prev按钮显示：

当表单加载时，这显然不在DOM中。我的native-btn-prev会淡入淡出webform，但不会触发click。

希望有道理......

Answer 1

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

这是动态插入元素的事件处理程序，您应该用最接近的非动态父代替文档。

请注意，你不能褪去那些不存在的东西。

Answer 2

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

Answer 3

您可以在标记中包含一个带有类ajax-loaded-element的空dom元素，因此它在页面加载时存在。当你的ajax请求成功时，它将填充该div。点击事件已经绑定，因此点击它会使fadeOut()按预期发生。

Answer 4

是的，请使用方法 http://api.jquery.com/on/

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

或

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