blocks|key|1074706|text|没有"DOM+changed“事件，创建一个事件会对浏览器造成很大的负担。最好使用load方法的回调来触发所需的函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1074707|$('#foobar').load('myurl.html',function()+{
++++var+mydiv+=+$("#mydiv");
});|code-block|syntax|javascript|1074708|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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.

<pre><code>$('#foobar').load('myurl.html',function() {
 var mydiv = $("#mydiv");
});
</code></pre>

blocks|key|1289588|text|另一种方法是使用trigger()触发您自己的自定义事件(让我们称之为content_loaded)。load()接受一个在完成时调用的回调函数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1289589|function+callback_function(responseText,+textStatus,+XMLHttpRequest)+{
++++//if+we+have+valid+data+...
++++trigger("content_loaded");
}

$("your_selector").load("your_url",+callback_function);|code-block|syntax|javascript|1289590|然后只需设置一个事件侦听器，并在事件被触发时运行它。|1289591|$("your_selector").bind("content_loaded",+your_results_loaded_function);|1289592|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/trigger/|1|http://api.jquery.com/load/^0|8|9|Z|E|1F|6|8|9|0|1F|6|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]|$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

Another way to do this would be to use <a href="http://api.jquery.com/trigger/" rel="nofollow noreferrer"><code>trigger()</code></a> to trigger your own custom event (let's call it <code>content_loaded</code>). <a href="http://api.jquery.com/load/" rel="nofollow noreferrer"><code>load()</code></a> takes a callback function it calls on completion:

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

$("your_selector").load("your_url", callback_function);
</code></pre>

And then just set up an event listener and run it whenever your event is fired.

<pre><code>$("your_selector").bind("content_loaded", your_results_loaded_function);
</code></pre>

blocks|key|1074538|text|你看过这个吗：http://plugins.jquery.com/project/livequery/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1074539|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/livequery/^0|7|18|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Have you seen this yet: <a href="http://plugins.jquery.com/project/livequery/" rel="nofollow noreferrer">http://plugins.jquery.com/project/livequery/</a>

blocks|key|1289689|text|您不能将.live()与"load“事件一起使用。在这里可以看到您想要做的一个非工作示例：http://www.jsfiddle.net/S5L6Q/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1289690|一种方法是使用计时器进行轮询：|1289691|var+length+=+$(".mydiv").length;
setInterval(function+()+{
++if+($(".mydiv").length+>+length)+{
++++length+=+$(".mydiv").length;
++++//+..+some+code
++}
},+100);|code-block|syntax|javascript|1289692|这将每隔1/10秒检查一次，以查看是否添加了一些。这可能真的很昂贵，这取决于选择器的复杂性。|1289693|另一种选择是通过一个通用包装器连接所有AJAX调用，该包装器可以检查长度并在需要时执行代码，然后执行提供的回调。|1289694|function+myAjax(url,+data,+callback)+{
++function+fullCallback(data)+{
++++if+($(".mydiv").length+>+0)+{
++++++//...+your+code...
++++}
++++if+(callback)+{
++++++callback();
++++}
++}
++$.get(url,+data,+fullCallback);
};|1289695|第二个可能是最好的路线，但第一个可能是最简单的。|1289696|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jsfiddle.net/S5L6Q/^0|4|7|19|U|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|R|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|S|3|T|5|6|7|1D|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

You can't use <code>.live()</code> with the "load" event. See a non-working example of what you'd like to do here: <a href="http://www.jsfiddle.net/S5L6Q/" rel="nofollow noreferrer">http://www.jsfiddle.net/S5L6Q/</a>

One approach is to poll with a timer:

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

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.

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.

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

The second one is probably the best route, but the first might be easiest.

blocks|key|1074929|text|是什么创造了#mydiv？您应该能够简单地在创建#mydiv的函数旁边抛出//doSomething。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1074930|$.post("myURL.html",+function(data){
++$("#mydiv").html(data);
++//doSomething|code-block|syntax|javascript|1074931|毕竟，#mydiv不会自己创建。无论您如何创建#mydiv，都可以使用相同的函数来执行您需要执行的任何其他操作。|1074932|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

What creates #mydiv? You should be able to simply throw //doSomething right alongside the function that creates #mydiv.

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

#mydiv doesn't create itself, after all. However you're creating #mydiv, use that same function to do whatever else you need to do.

blocks|key|1074643|text|例如(在上面我的评论的基础上展开)这来自jQuery文档。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1074644|$.ajax({
++url:+'ajax/test.html',
++success:+function(data)+{
++++$('#mydiv').html(data);
++++alert('Load+was+performed.');
++}
});|code-block|syntax|javascript|1074645|将警报替换为要运行的代码/要执行的操作|1074646|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For example (expanding on my comment above) this is from the jQuery docs..

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

replace the alert with the code you want to run/action you wish to perform

blocks|key|1074757|text|通常，我会处理加载元素时发生的任何操作，这些操作要么作为AJAX回调机制的一部分，要么作为AJAX成功回调返回的ready处理程序的一部分。当您想要将部分视图加载到页面上并希望保留代码和部分视图本身时，后者工作得很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1074758|局部视图：|1074759|<div+id="myDiv">
++...
</div>

<script+type="text/javascript">
+++$(function()+{
+++++++$('#myDiv').somePlugin(+...+);
+++});
</script>|code-block|syntax|javascript|1074760|使用回调|1074761|$.ajax({
+++url:+'/example.com/code.php',
+++success:+function(html)+{
++++++++++var+container+=+$('#container').html(html);
++++++++++$('#myDiv',container).somePlugin(+...+);
+++}
});|1074762|entityMap^0|1K|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

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 <code>ready</code> handler 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.

Partial View:

<pre><code>&lt;div id="myDiv"&gt;
 ...
&lt;/div&gt;

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

Using the callback

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

blocks|key|1075004|text|.live不能处理jquery+1.3文档中所述就绪结束加载事件。有关详细信息，请不要将load和ready事件与实时访问http://api.jquery.com/live/一起使用，|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1075005|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/live/^0|1P|R|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

.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 <a href="http://api.jquery.com/live/" rel="nofollow">http://api.jquery.com/live/</a> for more information,

blocks|key|1289850|text|是的，它还是有点贵。但是你可以试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289851|$(document).ready(function(){
++++$(document).bind('DOMSubtreeModified',+function()+{
+++++++if($("#mydiv").length+>+0){
+++++++++//Here+goes+your+code+after+div+load
+++++++}
++++});
});|code-block|syntax|javascript|1289852|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Yap, it is still little expensive. But you can try this:

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

I need a way to use the jquery <code>.live()</code> function to act on elements that are loaded via ajax.

For instance a div is loaded via ajax <code>.load()</code>

<pre><code>&lt;div id="mydiv"&gt;&lt;/div&gt;
</code></pre>

Normally I do <code>.live()</code> 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.

This code doesn't work, but I want to do something like this:

<pre><code>mydiv = $("#mydiv");

mydiv.live("mydiv.length &gt; 0", function() {
 // do something
});
</code></pre>

The "mydiv.length" being a substitue for the typical "click" or other event.

jquery .live on load event

jQuery

我需要一种方法来使用jquery .live()函数来处理通过ajax加载的元素。例如，通过ajax .load()加载div。<div id="mydiv"></div>通常我使用.live()事件进行单击，但我需要知道如何告诉dom这个新的div已经加载，而没有任何来自用户的显式操作/事件。这段代码不能工作，但我想这样做：mydiv = $("#mydiv");mydiv.live("mydi

问加载事件时的jquery .live
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载事件时的jquery .liveEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载事件时的jquery .live
EN