我需要一种方法来使用 jquery .live() 函数来作用于通过 ajax 加载的元素。
例如通过ajax加载一个div .load()
<div id="mydiv"></div>
通常我会通过点击事件执行.live()，但我需要知道如何告诉 dom 这个新 div 已加载，而没有来自用户的任何显式操作/事件。
这段代码不起作用，但我想做这样的事情：
mydiv = $("#mydiv");
mydiv.live("mydiv.length > 0", function() {
// do something
});
“mydiv.length”替代典型的“点击”或其他事件。
【问题讨论】：
标签： jquery
另一种方法是使用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);
【讨论】：
没有“DOM 已更改”事件，创建一个事件对浏览器来说很费力。你最好使用 load 方法的回调来触发你需要的函数。
$('#foobar').load('myurl.html',function() {
var mydiv = $("#mydiv");
});
【讨论】：
【讨论】：
您不能将.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);
};
第二条可能是最好的路线，但第一条可能最简单。
【讨论】：
是什么创建了#mydiv？您应该能够简单地将 //doSomething 放在创建 #mydiv 的函数旁边。
$.post("myURL.html", function(data){
$("#mydiv").html(data);
//doSomething
毕竟，#mydiv 不会自己创建。但是，您正在创建 #mydiv，请使用相同的函数来执行您需要执行的任何其他操作。
【讨论】：
例如（扩展我上面的评论）这是来自 jQuery 文档..
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('#mydiv').html(data);
alert('Load was performed.');
}
});
将警报替换为您要运行的代码/您希望执行的操作
【讨论】：
通常我会处理当元素作为 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( ... );
}
});
【讨论】：
.live 不适用于 jquery 1.3 文档中所述的就绪结束加载事件，您不能将加载和就绪事件与 live 一起使用 访问http://api.jquery.com/live/了解更多信息，
【讨论】：
是的，它仍然有点贵。但是你可以试试这个：
$(document).ready(function(){
$(document).bind('DOMSubtreeModified', function() {
if($("#mydiv").length > 0){
//Here goes your code after div load
}
});
});
【讨论】：