Question

我正在开发的网站使用jQuery UI tabs到load content via AJAX（在这种情况下，每个标签都由部分页面组成）。这很好用，我很满意这些结果。但是，我反复遇到的一个问题是，当我在master.js文件中包含jQuery（我用于站点范围的Javascript）时，它不适用于通过AJAX加载的任何内容。例如，我尝试了一些简单的事情：

// Theme all the buttons with jQuery UI themes.
$('input:button').button();

但是，标签上的所有按钮都没有相应的主题。

我该如何解决这个问题？我正在考虑使用jQuery's .live() function，但“加载”和“就绪”事件似乎都不起作用。这已成为一个非常令人沮丧的问题，因此可以提供任何可以提供的帮助。

Answer 1

嗯，livequery插件（http://docs.jquery.com/Plugins/livequery）过去常用于很多这样的东西。但是，这不是处理问题的最有效方法。

如果您是通过AJAX添加内容，为什么不在添加内容后重新为内容分配处理程序？

// setup simple jQuery plugin to handle all of your custom logic (although this could be a normal function as well)
$.fn.assignMyHandlers = function(){
    return this.each(function(){
        $(this).find('input:button').button();
        // etc
    });
};

// and then everywhere that you bring in AJAX'd content...
$.get('test.html', function( html ) {
    var $fragment = $( html );
    $fragment.assignMyHandlers();
    $fragment.appendTo( "#theList" );
});

Answer 2

您可以将它应用于AJAX回调中的新元素：

$.ajax({
    url:'/some/path',
    success: function( resp ) {
        var $newElements = $(resp);  //create jQuery object of new elements
        $newElements.find('input:button').button();  // call .button() on inputs
        $newElements.appendTo('body');  // append to wherever
    }
});

我不知道你的AJAX回调中发生了什么，但这应该给你一般的想法。

如何将jQuery应用于Document.Ready中不可用的元素？

2 个答案: