使jQuery函數與Ajax調用一起使用

Question

單擊按鈕時，我正在嘗試實現某些目標。 該按鈕是使用AJAX調用從服務器加載的。 但是，單擊按鈕時什么也沒有發生。 這是我的代碼：

（此ajax調用位於JS Fiddle中-僅用於測試目的） JS Fiddle

碼：

<div id="target"></div>

new Request.HTML({
    url: '/echo/html/',
    data: {
        html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
        delay: 0
    },
    method: 'post',
    update: 'target'
}).send();

$("button").click(function(){
    var value = $(this).siblings(".title").text();
    value += $(this).siblings(".date").text();
    alert(value);
});

Answer 1

由於按鈕尚不存在，您可以使用jQuery.on委托事件處理程序。

$("body").on('click', 'button', function(){
  var value = $(this).siblings(".title").text();
  value += $(this).siblings(".date").text();
  alert(value); 
});

另外，由於您同時使用jQuery和MooTools，而僅加載MooTools，因此您的提琴不起作用。

---

在看到作者頁面后添加：

var value = $(this).siblings(".title").text(); 選擇器將不起作用。 我建議將event類（如日歷事件中）添加到包裝器並使用：

var value = $(this).parents(".event").find(".title").text();

Answer 2

如果要通過AJAX（或任何其他方法）將元素添加到DOM，並且希望偵聽器保持綁定到它們，則需要將這些偵聽器附加到文檔中不變的元素上，例如$(document) 。

例如

$(document).on('click','button',function(e) {
 //your code here
});

代碼的問題在於，通過執行$("button")然后將單擊偵聽器附加到它們來獲取所有按鈕。 問題在於，執行此操作時，您的按鈕尚未附加到文檔，因此不會在其上附加單擊偵聽器。

Answer 3

頁面加載時按鈕是否不存在。 您不能使用$("button")來解決它。 您必須用其他東西將其包圍（例如div），然后像這樣： $('div').on('click','button', function(){...})

Answer 4

您需要考慮兩件事。

一個-mootools附帶的jQuery。 我很驚訝您正在使用的mootools版本中的$函數給了我一個非常基本的jQuery函數。 我嘗試了更高版本的mootools，但仍然發生了同樣的情況。 我確信它根本不是jQuery，而mootools只是使用$變量來達到目的。 [可選：因此，您也可以考慮在腳本中將jQuery定義為其他變量。]

因此，我在jsfiddle的《外部資源》中添加了指向最新jQuery的鏈接，然后它起作用了。 不要忘記在jsfiddle左側展開外部資源。 但是，如果mootools將$用於其用途，那么jQuery肯定會覆蓋它。 請考慮使用jQuery作為不同於$的變量。

二-使用AJAX請求的onSuccess函數。 您調用了AJAX請求，因此必須等待一段時間才能讓瀏覽器加載它，具體取決於用戶的Internet連接。 因此，這就是為什么我們使用onError和onSuccess事件。 在onSuccess中編寫按鈕功能，因為在加載AJAX之前，文檔上不存在按鈕。

請檢查此代碼，它可以工作。

http://jsfiddle.net/U7ewu/代碼：

new Request.HTML({
url: '/echo/html/',
data: {
    html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
    delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
    $("button").click(function(){
        var value = $(this).siblings(".title").text();
        value += $(this).siblings(".date").text();
        alert(value);
    });
}
}).send();

編輯：

請使用$ .noConflict（）; 這樣，mootools和jquery就不會在$變量上發生沖突。 $已被Mootols使用，因此請改用jQuery。

請檢查此jsfiddle。 http://jsfiddle.net/wkMep/

碼：

$.noConflict();

new Request.HTML({
url: '/echo/html/',
data: {
    html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
    delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
    jQuery("button").click(function(){
        var value = jQuery(this).siblings(".title").text();
        value += jQuery(this).siblings(".date").text();
        alert(value);
    });
}
}).send();

Answer 5

嘗試這個

$("button").on("click",function(){
    var value = $(this).siblings(".title").text();
    value += $(this).siblings(".date").text();
    alert(value);
});