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

您可以使用jquery的on函数来触发动态创建的html的click事件（在您的情况下，它是创建动态html（标签）的ajax函数）。 `

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

`

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

3 个答案: