将jQuery方法绑定到通过Ajax调用加载的HTML

Question

我有从ajax调用加载的内容，但我想将自定义方法（不是事件）绑定到dom元素以实现某些功能。

我在网上找到的大多数解决方案都将事件绑定到页面上，例如

$(".example").ajax({
  'success': function(data) {
     something()
  }
})

我想要实现类似“内容加载”的功能，因为那里没有事件。

$('.post').live('load', function() {
       .....
    });

Answer 1

考虑.ajaxComplete 。

http://api.jquery.com/ajaxComplete/

例如：

// Normally you have an anonymous function. Make it a named function.
function myInitialize(scope) {
    $('.button', scope).button();
}

// Call it in document ready to initialize stuff that loaded in the page.
$(myInitialize(null));

// Call it again in .ajaxComplete
// 'this' is the div that loaded or has new content.
$('*').ajaxComplete(myInitialize(this));

Answer 2

1）将所有绑定函数放入一个函数中...

2）现在在$（document）.load（）内部调用此函数，以及将html添加到DOM的ajax的成功函数

注意*-必须在Success方法中调用此函数，因为ajax是同步的，并且只有在响应到来之后才调用成功方法，因此，如果将html添加到DOM之后调用，这些函数将被绑定

Answer 3

根据文档：

.live（eventType，eventData，handler）

eventType包含JavaScript事件类型的字符串，例如“ click”或“ keydown”。 从jQuery 1.4开始，字符串还可以包含多个以空格分隔的事件类型或自定义事件名称 。

eventData将传递给事件处理程序的数据映射。

handler在事件触发时执行的函数。

所以你应该这样做。 我不知道为什么不起作用。 我邀请您检查这个旧答案。

如何在jQuery中制作实时自定义事件

希望对您有所帮助！

Answer 4

您可以使用live来完成此操作，如果您有一个事件可以将该操作绑定到（例如onclick）...否则，请尝试livequery ，它允许您在元素出现时仅绑定一个操作（没人需要单击任何位置采取行动）

Answer 5

从过去2天的经验中，我了解到有多种方法可以实现所需的功能

最快的方法可能是使用自定义函数简单地处理所需的数据，该自定义函数将在通过AJAX获得内容并将其插入DOM之前（或之后）被调用

$.ajax({
    success: function(data) {
        // do anything with data here
        data = $(data).find('#my_div').addClass('red');
        $('#element').append(data);
        // OR - do the neccessary amendments here
        $('#my_div').addClass('red');
    }
});

---

比较容易 （但可能更慢）的方法可能仍然是使用livequery来操纵所需的对象-但是，如果设置不正确，这种方法可能会非常缓慢

$('#my_div').livequery(function() {
    $(this).addClass('red');
});

---

我建议阅读此处询问实时和实时查询性能时获得的一些链接

Answer 6

我遇到了Parched的ajaxComplete方法的麻烦，因为始终如一地为它提供了将行为应用到的适当目标（例如AFAICT xhr.responseText不是文档的一部分，因此无法绑定），因此我想出了另一种方法，可能会有所帮助。

在我所有的ajax调用中，我都使用complete：事件在新html的目标上触发一个已知事件。 例如，facebox容器或pjax目标。

// in my facebox ajax setup
$.ajax({
  ...,
  complete: function() {
    $('#facebox').trigger('end.facebox');
  }
}

然后我分别对此事件做出反应。

$('*').live('end.facebox', function(e) {
  if (e.target == this) {
    apply_behavior(this); // in the style of Parched Squid's myInitialize
  }
});

我很想听听建议/改进，但这似乎足够笼统地适应各种ajax方法/事件类型和目的地。