Javascript在使用Ajax加载的jQuery UI选项卡中不起作用

Javascript似乎在通过ajax加载的所有jQueryUI选项卡中都被禁用。我正在用jQuery工具提示和.click（）警报测试这一点。Javascript在没有通过ajax加载的选项卡（页面上有id）中工作良好

以下是我如何调用选项卡：

$(function() {
$('#foo-tabs').tabs(
{
heightStyle: 'content',
// Callback run when selecting a tab
beforeLoad: function(event, ui) {

// If the panel is already populated do nothing
if (ui.panel.children().size() > 0)
    return false;

//load specific ID within target page
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));

// stop the default process (default ajax call should not be launched)
return false;
}
}
);
});

下面是我试图激活的javascript：

$(function() {
$( '.activate-tooltip' ).tooltip();
});

还有一个测试：

$(function() {
$("h1").click(function() {
alert("zomg javascript works!");
});
});

---

关于如何让javascript在所有ajax加载的选项卡中工作，有什么想法吗？谢谢你花时间来完成这件事

问题是，在绑定事件时，DOM中不存在这些元素。处理这种情况的方法是将事件委托给DOM中确实存在的更高级别的DOM元素（如有必要，可以委托给文档）

例如，使用

对于工具提示插件，可以执行以下操作

   $(function() {
        //initialize tooltip plugin
        //dvCont is just an existing element in the DOM, you can use #foo-tabs
        $('#dvCont').tooltip({
            items: '.activate-tooltip',
            content: function(){
                var element = $( this );
               if ( element.is( ".activate-tooltip" ) ) {
                return 'Some text';
                }
                if ( element.is( "[title]" ) ) {
                  return element.attr( "title" );
               }

             }
          });

      $('#dvCont').append($('<div class="activate-tooltip" >Test</div>')); //dynamic content

    });

$（函数（）{
//初始化工具提示插件
//dvCont只是DOM中的一个现有元素，您可以使用#foo选项卡
$（'#dvCont'）。工具提示({
项目：“.激活工具提示”，
内容：函数（）{
var元素=$（此）；
if（element.is（“.activate tooltip”））{
返回“一些文本”；
}
if（元素为（“[标题]”）{
返回元素。属性（“标题”）；
}
}
});
$（'#dvCont'）。追加（$（'Test'）；//动态内容
});

这里有一个链接到

您可以在页面上看到该插件的更完整示例

编辑：

在回答为什么在将插件添加到DOM后立即初始化插件时应该使用事件委派时，我认为值得指出的是，除了处理动态内容之外，使用事件委派的另一个原因是性能。也就是说，通过事件委派，您可以附加更少的事件处理程序，这反过来意味着使用更少的内存

---

为了说明这一点，这里有一个指向的链接，它比较了使用事件委派和直接绑定

您可以使用jquery的函数上的来触发动态创建的html的点击事件（在您的例子中是创建动态html（选项卡）的ajax函数）`

$（“h1”）。在（“单击”，function（）{alert（“zomgjavascript工作！”；}）

`
当调用方法（如
.click（）
）时，它会将事件处理程序直接添加到jQuery对象中的所有元素（即运行时与选择器匹配的元素）。当您向页面添加新元素时，它们没有关联的事件处理程序，因为在执行代码时它们不存在

解决方案是事件委托；一般原则是，在DOM树的更高一级的元素上设置事件处理程序，该元素包含您希望匹配的所有元素。然后，当该类型的事件在其内部的某个元素上触发并通过处理程序向该元素冒泡时，它会检查触发元素是否满足条件；如果是，则执行回调函数

然而，这只适用于事件处理程序，不适用于插件。我不知道如何委托插件初始化，所以您可能需要再次执行代码。谢天谢地，
.load（）
函数接受一个回调函数，该函数将在通过AJAX加载完新选项卡内容后运行

ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'), function() {
    $('.activate-tooltip', ui.panel).tooltip();
});

您可以使用jquery的
live
函数为动态创建的html触发单击事件<代码>$（“h1”）.live（“单击”，函数（）{alert（“zomgjavascript工作！”）；}）@vimalnath他们可以，但不应该。自从jQuery 1.7发布以来，
.live（）
函数已被弃用；他们应该优先使用
.on（）
（1.7+）或
.delegate（）
，而不是
.live（）
。使用
.live（）
编写新代码的唯一时间是使用1.4.3之前版本的jQuery（添加
.delegate（）
时）；如果是这样的话，您可能应该升级。Live已被弃用。您可以使用
$（document）.on（'click'，'h1'，function（）{}）
.my bad，yes请使用
.on
而不是
.live
@AnthonyGrist也不建议使用，因为它已被.on.取代。仅使用$（'h1'）将仅在加载时附加到页面上的'h1'元素，而不是动态加载后。谢谢！这很好用。你知道我该如何让jquery工具提示使用它吗？不知何故，
$（文档）.on（'.activate tooltip'，function（）
听起来不太正确……这是否也意味着无法为ajax加载的选项卡激活所有javascript？你看了我在jQuery UI工具提示演示页面上发布的示例了吗？是的，对它进行了处理，但仍然不起作用。Anthony的回答中解释了解决方案。但是你的帖子非常有用-upvoted！我更新了我的帖子，用一个例子说明了如何为tooltip插件执行此操作，使用此代码，您只绑定一个事件处理程序（到父元素），使用Anthony发布的代码，您将它绑定到带有.activate tooltip类的每个元素（绑定的事件处理程序越少，页面的速度就应该越快，对于这种特殊情况可能没有多大区别，但通常情况下这是规则）。此外，如果您随后使用此代码将另一个元素添加到您的容器中，它仍然会使用Anthony的代码获得工具提示，但不会。在本例中@AnthonyGrist实际上是使用工具提示插件的您可以在更高级别的元素上初始化插件，而不是在动态创建的内容上初始化插件，因此它是可行的。我在帖子中发布了一个示例。评论只能编辑5分钟（单击此框可关闭）
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'), function() {
    $('.activate-tooltip', ui.panel).tooltip();
});