尚未加載DOM的jQuery訪問元素

Question

如何編寫一個點擊事件，該事件作用於尚未加載到DOM中的元素？

方案：

• 母語的BTN是在文件準備好裝載一個div。
• AJAX加載元件是一個Ajax形式執行 一系列客戶端事件的後

我的事件是如下出現一個div：

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

我不能似乎得到.ajax加載的元素來響應。我知道.live（）已被棄用，而.on（）事件僅適用於直接與新插入的元素進行交互，而不是通過輔助操作對其進行操作。有沒有.on（）的另一個用法，我錯過了？

謝謝！

UPDATE

我現在用的。對（）事件來訪問。 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的多頁的網頁表單，它顯示爲一個頁面上的塊。因爲我已經爲它分配了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(); 
}); 

如下：（阿賈克斯一個/上是白色的，原生一個/上是黑色）

正如你所看到的，它只是開始Next按鈕，其功能就像一個魅力。 Webform淡出，ajax-loaded-next觸發器點擊，頁面前進，webform淡入。

不過02頁，阿賈克斯加載-上一頁按鈕顯示出來：

這顯然不是在DOM的形式加載時。我的native-btn-prev會將網絡表格淡入淡出，但不會觸發點擊。

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

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。點擊事件已被綁定，因此點擊它會使​​按預期發生。

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();   
});