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”是典型“点击”或其他事件的替代品。

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);

Answer 2

没有“DOM已更改”事件，并且创建一个对浏览器造成负担。您最好使用load方法的回调来触发您需要的功能。

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

Answer 3

你有没有见过这个：http://plugins.jquery.com/project/livequery/

Answer 4

您不能将.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);
};

第二个可能是最好的路线，但第一个可能是最简单的。

Answer 5

什么创造了#mydiv？您应该能够简单地将// doSomething与创建#mydiv的函数一起抛出。

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

毕竟，＃mydiv并不会创造自己。但是，如果您正在创建#mydiv，请使用相同的功能来执行您需要执行的任何操作。

Answer 6

例如（扩展我上面的评论）这是来自jQuery docs ..

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

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

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( ... );
   }
});

Answer 8

.live无法使用jquery 1.3文档中所述的就绪结束加载事件，您无法使用live和ready事件请访问http://api.jquery.com/live/了解详情，

Answer 9

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

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

jquery .live on load事件

9 个答案: