1

在通过 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 加载的选项卡中工作的任何想法？感谢您抽出宝贵的时间来解决这个问题！

4

3 回答 3

2

问题在于，在您绑定事件时，这些元素并不存在于 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的链接

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

编辑：

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

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

于 2012-12-18T14:39:21.490 回答
1

当您调用诸如 之类的方法时.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();
});
于 2012-12-18T14:46:08.017 回答
0

您可以使用onjquery 的功能来触发动态创建的 html 的点击事件（在您的情况下，它是创建动态 html（选项卡）的 ajax 函数）。`

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

`

于 2012-12-18T14:42:00.873 回答