jquery .live on load事件
我需要一种方法来使用jquery .live()
函数来处理通过ajax加载的元素。
例如,通过ajax .load()
加载div
通常我会使用click事件执行.live()
,但我需要知道如何告诉dom这个新的div已加载而没有来自用户的任何显式操作/事件。
这段代码不起作用,但我想做这样的事情:
mydiv = $("#mydiv"); mydiv.live("mydiv.length > 0", function() { // do something });
“mydiv.length”是典型“点击”或其他事件的替代品。
没有“DOM已更改”事件,并且创建一个对浏览器造成负担。 您最好使用load方法的回调来触发您需要的function。
$('#foobar').load('myurl.html',function() { var mydiv = $("#mydiv"); });
另一种方法是使用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);
你有没有见过这个: http : //plugins.jquery.com/project/livequery/
您不能将.live()
与“load”事件一起使用。 查看您要在此处执行的操作的非工作示例: 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); };
第二个可能是最好的路线,但第一个可能是最简单的路线。
什么创造了#mydiv? 您应该能够简单地将// doSomething与创建#mydiv的函数一起抛出。
$.post("myURL.html", function(data){ $("#mydiv").html(data); //doSomething
毕竟,#mydiv并不会创造自己。 但是,您正在创建#mydiv,使用相同的function来执行您需要执行的任何操作。
例如(扩展我上面的评论)这是来自jQuery文档..
$.ajax({ url: 'ajax/test.html', success: function(data) { $('#mydiv').html(data); alert('Load was performed.'); } });
将警报替换为您要运行的代码/您希望执行的操作
通常,我会处理在元素作为AJAX回调机制的一部分加载时发生的任何操作,或者作为AJAX成功回调的返回HTML中包含的ready
处理程序的一部分。 当您想要将部分视图加载到页面上并希望将代码保留在部分视图本身时,后者可以很好地工作。
部分视图:
...
使用回调
$.ajax({ url: '/example.com/code.php', success: function(html) { var container = $('#container').html(html); $('#myDiv',container).somePlugin( ... ); } });
.live不能与jquery 1.3文档中所述的就绪结束加载事件一起使用,您无法通过实时访问http://api.jquery.com/live/来使用加载和就绪事件,以获取更多信息,
呀,它仍然有点贵。 但你可以试试这个:
$(document).ready(function(){ $(document).bind('DOMSubtreeModified', function() { if($("#mydiv").length > 0){ //Here goes your code after div load } }); });