使用jQuery的AJAX功能

看來這個主題是反覆出現的，但很抱歉，我找不到任何答案來解決我的問題。使用jQuery的AJAX功能

我正在使用jQuery來使用Ajax更新div內容。此更新由更新的div內的項目觸發。

$(function() { 

    $(".add").on('click',function(){ 
     $("#table").load("displayTable.php"); 
    }); 

    // just to see if I can update the DOM... 
    $('input').on('click',function(){ 
     $(this).css("background","red"); 
    }); 

});

HTML：

<div id="table"> 
     <input type="text" />    
     <a class="add">Add</a> 
    </div>

由於未更新DOM，jQuery的功能都只能在原來的#table，而不是AJAX加載一個工作。

我沒有真正很好地理解如何使用上（），我想這將是更新的監聽器解決方案......

感謝您的幫助:)

來源

2012-03-07 Yako

我沒有看到任何AJAX調用。 – j08691 2012-03-07 16:43:36

@ j08691'.load'是一個AJAX函數。 – lonesomeday 2012-03-07 16:51:48

@lonesomeday - 的確如此。呃，這太早了... – j08691 2012-03-07 16:52:47

讓我們先來定義幾個術語開始。事件處理程序綁定的元素稱爲捕獲元素。事件發生的元素（所以點擊元素）是發起元素。

這些元素不一定是相同的，因爲Javascript 冒泡中的事件，也就是說，始發元素的所有祖先元素被通知了該事件。所以你可以在任何祖先元素上處理事件。這被稱爲事件代表團。

on方法是做事件委託的好方法。原始選擇中的元素是捕獲元素：事件處理程序將綁定到此元素。如果這個元素總是存在的 - 即它不會被AJAX取代 - 你可以確定所有的事件都會被這個處理器處理，即使它們來自尚不存在的元素。

的on最簡單形式僅具有一個選擇器，它被視爲兩個始發元件和攝像元件：

$('input').on('click', function() {

該處理程序被綁定到所有input元素和事件，對input元件起源由它處理。但是，綁定處理程序時只存在input個元素將綁定處理程序，所以這對您來說並不好。

還有另一種語法，帶有一個附加選擇器。這允許您指定綁定處理程序的元素以及指定其起源位置的另一個選擇器。在這種情況下，#table將永遠存在，所以我們可以綁定到：

$('#table').on('click', 'input', function() {

這上面說，「一個事件處理程序綁定到#table，但只有激活它，如果該事件是一個input元素上點擊」。

來源

2012-03-07 16:50:00 lonesomeday

非常感謝您的詳細解釋。這比jQuery doc好得多;） – Yako 2012-03-07 17:03:44

您需要使用.on()

事件代表團語法試試這個：

$(function() { 

    $(".add").on('click',function(){ 
     $("#table").load("displayTable.php"); 
    }); 

    // just to see if I can update the DOM... 
    $("#table").on("click","input",function(){ 
     $(this).css("background","red"); 
    }); 

});

來源

2012-03-07 16:42:01

非常感謝！即使使用文檔，此事件委派語法也不是那麼明顯...... – Yako 2012-03-07 16:48:51

想法是您將事件綁定到表，然後將其委託給它的子元素。 – 2012-03-07 17:02:40

使用jQuery的AJAX功能

回答

相關問題