jquery .live on load 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2548479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery .live on load event
提问by djburdick
I need a way to use the jquery .live()function to act on elements that are loaded via ajax.
我需要一种方法来使用 jquery.live()函数来处理通过 ajax 加载的元素。
For instance a div is loaded via ajax .load()
例如一个 div 是通过 ajax 加载的 .load()
<div id="mydiv"></div>
Normally I do .live()with a click event, but I need to know how to tell the dom that this new div has loaded without any explicit actions/events from the user.
通常我会.live()使用点击事件，但我需要知道如何告诉 dom 这个新的 div 已经加载，而没有来自用户的任何明确的操作/事件。
This code doesn't work, but I want to do something like this:
这段代码不起作用，但我想做这样的事情：
mydiv = $("#mydiv");
mydiv.live("mydiv.length > 0", function() {
// do something
});
The "mydiv.length" being a substitue for the typical "click" or other event.
“mydiv.length”是典型的“点击”或其他事件的替代品。
采纳答案by PetersenDidIt
There isn't a "DOM changed" event and creating one is taxing on the browser. You are best off using the callback for the load method to trigger the functions you need to.
没有“DOM 更改”事件，创建一个对浏览器来说是负担。您最好使用 load 方法的回调来触发您需要的功能。
$('#foobar').load('myurl.html',function() {
var mydiv = $("#mydiv");
});
回答by Sean Vieira
Another way to do this would be to use trigger()to trigger your own custom event (let's call it content_loaded). load()takes a callback function it calls on completion:
另一种方法是使用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);
And then just set up an event listener and run it whenever your event is fired.
然后只需设置一个事件侦听器并在您的事件被触发时运行它。
$("your_selector").bind("content_loaded", your_results_loaded_function);
回答by Bradford
Have you seen this yet: http://plugins.jquery.com/project/livequery/
回答by bcherry
You can't use .live()with the "load" event. See a non-working example of what you'd like to do here: http://www.jsfiddle.net/S5L6Q/
您不能.live()与“加载”事件一起使用。在此处查看您想要执行的操作的非工作示例：http: //www.jsfiddle.net/S5L6Q/
One approach is to poll with a timer:
一种方法是使用计时器进行轮询：
var length = $(".mydiv").length;
setInterval(function () {
if ($(".mydiv").length > length) {
length = $(".mydiv").length;
// .. some code
}
}, 100);
This will check every 1/10th of a second to see if some have been added. This might be really expensive depending on the complexity of your selector.
这将每 1/10 秒检查一次，看看是否添加了一些。根据选择器的复杂性，这可能非常昂贵。
Another option is to hook all of your AJAX calls through a common wrapper that can check the length and executes your code if needed, then executes the supplied callback.
另一种选择是通过一个通用包装器挂接所有 AJAX 调用，该包装器可以检查长度并在需要时执行您的代码，然后执行提供的回调。
function myAjax(url, data, callback) {
function fullCallback(data) {
if ($(".mydiv").length > 0) {
//... your code...
}
if (callback) {
callback();
}
}
$.get(url, data, fullCallback);
};
The second one is probably the best route, but the first might be easiest.
第二个可能是最好的路线，但第一个可能是最简单的。
回答by motorfirebox
What creates #mydiv? You should be able to simply throw //doSomething right alongside the function that creates #mydiv.
是什么创造了#mydiv？您应该能够在创建#mydiv 的函数旁边简单地抛出 //doSomething。
$.post("myURL.html", function(data){
$("#mydiv").html(data);
//doSomething
#mydiv doesn't create itself, after all. However you're creating #mydiv, use that same function to do whatever else you need to do.
毕竟，#mydiv 不会自行创建。无论您创建的是#mydiv，还是使用相同的函数来完成您需要做的任何其他事情。
回答by CResults
For example (expanding on my comment above) this is from the jQuery docs..
例如（扩展我上面的评论）这是来自 jQuery 文档..
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('#mydiv').html(data);
alert('Load was performed.');
}
});
replace the alert with the code you want to run/action you wish to perform
用您要运行的代码/要执行的操作替换警报
回答by tvanfosson
Typically I would handle any actions that occur when the element is loaded either as part of the AJAX callback mechanism or as part of a readyhandler that is included in the returned HTML of the AJAX success callback. The later works well when you want to load a partial view onto the page and want to keep the code with the partial view itself.
通常，我会将元素作为 AJAX 回调机制的一部分或作为ready包含在 AJAX 成功回调的返回 HTML 中的处理程序的一部分加载时发生的任何操作进行处理。当您想将分部视图加载到页面上并希望将代码与分部视图本身保持在一起时，后者效果很好。
Partial View:
部分视图：
<div id="myDiv">
...
</div>
<script type="text/javascript">
$(function() {
$('#myDiv').somePlugin( ... );
});
</script>
Using the callback
使用回调
$.ajax({
url: '/example.com/code.php',
success: function(html) {
var container = $('#container').html(html);
$('#myDiv',container).somePlugin( ... );
}
});
回答by Siddharth
.live does not work with ready end load event as stated in jquery 1.3 documentation you cannot use load and ready event with live visit http://api.jquery.com/live/for more information,
.live 不适用于 jquery 1.3 文档中所述的就绪结束加载事件，您不能在实时访问http://api.jquery.com/live/ 中使用加载和就绪事件以获取更多信息，
回答by Vijay
Yap, it is still little expensive. But you can try this:
是的，它仍然有点贵。但是你可以试试这个：
$(document).ready(function(){
$(document).bind('DOMSubtreeModified', function() {
if($("#mydiv").length > 0){
//Here goes your code after div load
}
});
});
