jquery .live on load event

Question

我需要一種方法來使用jquery .live()函數來處理通過ajax加載的元素。例如一個div通過AJAX加載​​

<div id="mydiv"></div> 

通常我做.live()一個點擊事件，但我需要知道如何告訴DOM，這個新的div已經沒有任何明確的行動加載

/來自用戶的事件。

此代碼不能正常工作，但我想要做這樣的事情：

mydiv = $("#mydiv"); 

mydiv.live("mydiv.length > 0", function() { 
     // do something 
}); 

的「mydiv.length」正在爲一個典型的substitue「點擊」或其他事件。

Answer 1

沒有「DOM更改」事件並且創建一個在瀏覽器上徵稅。您最好使用load方法的回調來觸發您需要的功能。

$('#foobar').load('myurl.html',function() { 
    var mydiv = $("#mydiv"); 
}); 

Answer 2

你見過這個尚未：http://plugins.jquery.com/project/livequery/

Answer 3

例如，這是從jQuery文檔（以上我的評論擴大）..

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
    $('#mydiv').html(data); 
    alert('Load was performed.'); 
    } 
}); 

與您要運行的代碼替換警報/您希望執行的操作

Answer 4

通常我將處理當元素被加載發生的任何動作或者作爲AJAX回調機制的或作爲包括在AJAX成功回調返回的HTML一個ready處理程序的一部分的部分。當你想要在頁面上加載一個局部視圖並且希望保留代碼和局部視圖本身時，後面的工作很好。

管窺：

<div id="myDiv"> 
    ... 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('#myDiv').somePlugin(...); 
    }); 
</script> 

使用回調

$.ajax({ 
    url: '/example.com/code.php', 
    success: function(html) { 
      var container = $('#container').html(html); 
      $('#myDiv',container).somePlugin(...); 
    } 
}); 

Answer 5

另一種方式來做到這一點是使用trigger()觸發自己的自定義事件（姑且稱之爲content_loaded）。 load()需要它完成調用回調函數：

function callback_function(responseText, textStatus, XMLHttpRequest) { 
    //if we have valid data ... 
    trigger("content_loaded"); 
} 

$("your_selector").load("your_url", callback_function); 

然後就是設置一個事件監聽器，並運行它時，你的事件。

$("your_selector").bind("content_loaded", your_results_loaded_function); 

Answer 6

你不能用 「load」 事件使用.live()。看到你想在這裏做什麼非工作例如：http://www.jsfiddle.net/S5L6Q/

一種方法是用計時器來輪詢：

var length = $(".mydiv").length; 
setInterval(function() { 
    if ($(".mydiv").length > length) { 
    length = $(".mydiv").length; 
    // .. some code 
    } 
}, 100); 

這將檢查每1/10秒，看看一些已被添加。根據選擇器的複雜程度，這可能非常昂貴。

另一個選項是勾所有的AJAX調用的通過一個共同的包裝，可以檢查長度和執行如果需要的話你的代碼，然後執行提供的回調函數。

function myAjax(url, data, callback) { 
    function fullCallback(data) { 
    if ($(".mydiv").length > 0) { 
     //... your code... 
    } 
    if (callback) { 
     callback(); 
    } 
    } 
    $.get(url, data, fullCallback); 
}; 

第二個可能是最好的路線，但第一個可能是最簡單的。

Answer 7

什麼創建了#mydiv？您應該能夠簡單地將// doSomething與創建#mydiv的函數並行執行。

$.post("myURL.html", function(data){ 
    $("#mydiv").html(data); 
    //doSomething 

#mydiv畢竟沒有創建自己。然而，你正在創建#mydiv，使用相同的功能來做你需要做的任何事情。

Answer 8

.live不準備結束load事件工作在jQuery 1.3文檔，你可以不使用負載，並準備事件現場 訪問http://api.jquery.com/live/更多信息中所述，

Answer 9

邑，它仍然是有點貴。但你可以試試這個：

$(document).ready(function(){ 
    $(document).bind('DOMSubtreeModified', function() { 
     if($("#mydiv").length > 0){ 
     //Here goes your code after div load 
     } 
    }); 
});