jQuery的.live()方法在加载事件上的应用

Question

我需要一种方法，能够使用jQuery的.live()函数来处理通过ajax加载的元素。

例如，通过ajax .load()方法加载的div。

<div id="mydiv"></div>

通常我会用.live()来处理点击事件，但我需要知道如何在没有任何用户显式操作/事件的情况下告诉DOM这个新的div已经加载完毕。

以下代码不起作用，但我想做类似于这样的事情:

mydiv = $("#mydiv");

mydiv.live("mydiv.length > 0", function() {
       // do something
});

"mydiv.length"代替了典型的"click"或其他事件。

- djburdick

---

你是如何进行ajax加载的？实现你想要的最好方法是在ajax调用的成功回调函数中。 - CResults

Answer 1

另一种方法是使用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);

- Sean Vieira

Answer 2

没有“DOM变化”事件，创建这样的事件会对浏览器产生很大负担。最好使用load方法的回调来触发所需的函数。

$('#foobar').load('myurl.html',function() {
    var mydiv = $("#mydiv");
});

- PetersenDidIt

---

谢谢！我本以为我尝试过了，但是把它放在回调函数外面了。 - djburdick

太好了，这个解决了我两个问题 - 感谢 @PetersenDidIt && @bandhunt！ - logic-unit

Answer 3

您看过这个吗：http://plugins.jquery.com/project/livequery/

这个插件可以让您在文档准备好之前，就对新增的 DOM 元素进行操作。此外，该插件还支持事件委托和选择器缓存等功能，可帮助您更高效地处理页面上的元素。

- Bradford

Answer 4

您不能在“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);
};

第二个方案可能是最好的选择，但第一个方案可能更容易。

- bcherry

Answer 5

#mydiv是由什么创建的？你应该能够在创建#mydiv的函数旁边简单地添加//doSomething。

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

#mydiv毕竟不是自己创建的。无论你是如何创建#mydiv的，请使用相同的函数来完成其他需要做的事情。

- motorfirebox

Answer 6

例如（扩展我上面的评论），这是来自jQuery文档的内容。

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

将警告替换为您想要运行的代码/执行的操作

- CResults

Answer 7

通常情况下，当元素加载时发生的任何操作都可以通过 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( ... );
   }
});

- tvanfosson

Answer 8

是的，它仍然有点贵。但你可以尝试这个：

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

- Vijay

Answer 9

.live不支持ready和load事件，正如jQuery 1.3文档所述。您不能在.live中使用load和ready事件。 请访问http://api.jquery.com/live/获取更多信息。

- Siddharth