如何在每次在jQuery中加載元素時調用.ready？

Question

我想有一個觸發間隔DOM元素被初始化，像這樣一次事件：

HTML

<div id="container"> 
    <div id="data">data!</div> 
</div> 

<div id="clickme">Click me!</div>​ 

的Javascript

$(function() { 
    var i = 0; 
    $('#clickme').click(function() { 
     $('#container').html('<div id="data">data '+i+'</div>'); 
     i++; 
    }); 

    // this event gets called only the first time #data element is ready 
    // I want it to be called each time #data comes into being 
    $('#data').ready(function() { 
     alert('element data ready!'); 
    }); 
}); 

---

我試過了：

// doesn't work 
$('#data').live('ready', function() { 
    alert('element data ready (live)'); 
}); 

編輯：我有興趣做，對於由AJAX插入的元素。例如：

$.post('/myaction/', { 
    param: 'value' 
    }, 
    function(data) { 
     $('#someContainer').replaceWith(data); 
    }); 

    // this function operates on elements returned by the ajax call, so they are not available at this point. 
    myFunction(); 

    // so I'd better call myFunction() when the ajax data is inserted 
}); 

小提琴這裏：http://jsfiddle.net/nf8CP/

Answer 1

爲您更新的問題，只要將你的函數回調，就大功告成了。

$.post('/myaction/', { 
    param: 'value' 
    }, 
    function(data) { 
     $('#someContainer').replaceWith(data); 

     myFunction(); // Call it right here. 
    }); 

// myFunction(); // Not here!!! 

}); 

---

有DOM突變事件，但我相信他們是過時了，沒有完全瀏覽器的支持。

還有livequery插件，但它確實是過度殺毒。

.ready()處理程序不處理單個元素的加載事件。僅適用於DOM加載的事件。這三個例子都具有相同的行爲：

• $(document).ready(...
• $('document').ready(...
• $("#data").ready(...
• $().ready(...

沒有區別。傳遞給$的參數將被忽略。

正確的解決方案是在創建元素時調用所需的代碼。

$(function() { 
    var i = 0; 
    $('#clickme').click(function() { 
     $('#container').html('<div id="data">data '+i+'</div>'); 
     dataReady(); 
     i++; 
    }); 

    function dataReady() { 
     alert('element data ready!'); 
    } 
}); 

此外，由於你的榜樣，更好的和破壞性更小的解決方案是簡單地修改文本在#data，而不是與.html()破壞的元素。

Answer 2

ready（或更確切地說DOMContentLoaded）只在頁面被完全解析時觸發一次。有沒有乾淨的方式來做你想在這裏，所以你需要去手動安裝你的事件處理程序。 （有DOM突變事件，但這些事件非常嘈雜，你的頁面會自己嘗試處理它們，除非你真的知道你在做什麼，否則這通常是一個壞主意）。

但是，我懷疑你真正想要的是事件代表團。您需要在#container上安裝事件而不是#data，因爲當您調用ready函數時，現有的#data節點將從DOM中刪除！

例如：

$('#container').on('click', '#data', function() { 
    alert('#data element was clicked!'); 
}); 

這樣做是對#container安裝一個處理器（從不改變），一個偵聽click事件發起（或鼓泡通過）一個子元素與選擇#data。這意味着即使您不斷更換#container的內容，也不必在其內容上安裝新的事件處理程序。

Answer 3

您可以使用DOMNodeInserted：

$(document).on('DOMNodeInserted', function() { 
    alert('element data ready (live)'); 
}); 

每當一個節點被添加到DOM將被解僱。

您還可以過濾觸發什麼節點這一事件像這樣：

$(document).on('DOMNodeInserted', '#data', function() { 
    ... 
} 

現在加入的data的ID節點時，它只會引發。

Answer 4

你爲什麼不把你的。就緒您點擊按鈕裏面，所以你可以看到，如果它已經準備好你點擊它每次：

$(function() { 
    var i = 0; 
    $('#clickme').click(function() { 
     $('#container').html('<div id="data">data ' + i + '</div>'); 
     i++; 
     $('#data').ready(function() { 
      alert('element data ready!'); 
     }); 
    }); 
});​