2

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

场景：

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

我的活动如下：

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

我似乎无法让 .ajax-loaded 元素做出响应。我知道 .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 中使用了一个多页网络表单，它在页面上显示为一个块。因为我已经为其分配了 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 是白色的，native NEXT/PREV 是黑色的）

截屏

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

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

截屏

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

希望这是有道理的...

4

4 回答 4

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

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

请注意，您不能淡出不存在的东西。

于 2013-04-27T18:43:13.283 回答
0 
$(document).on('click', '.native-btn', function() {
  $('.ajax-loaded-element').fadeOut();      
});
于 2013-04-27T18:43:14.617 回答
0

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

于 2013-04-27T18:43:34.740 回答
0

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

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

或者

$(".native-btn").on( "click", function() {
        $(".ajax-loaded-element").fadeOut();        
});
于 2013-04-27T18:44:07.837 回答