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