Javascript无法在加载Ajax的jQuery UI选项卡中运行

Question

在通过ajax加载的所有jQuery UI选项卡中似乎禁用了Javascript。 我正在使用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加载的标签中工作的任何想法？ 感谢您抽出宝贵时间来完成此操作！

Answer 1

问题是，在绑定事件时，DOM中不存在这些元素。 处理这个问题的方法是将事件委托给DOM中存在的更高级别的DOM元素（如果需要，直到Document）。

例如，使用.on委派

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

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

   $(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

    });

这是jsBin的链接

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

编辑：

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

为了说明这里是一个jsPerf的链接，它直接使用事件委托与绑定进行比较。

Answer 2

当您调用诸如.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();
});

Answer 3

你可以使用on的jQuery的功能，点击触发动态创建的HTML事件（在你的情况下，其它创建动态HTML（标签）的AJAX功能）。 `

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

`