从动态创建的页面将元素加载到文档中时运行函数

Question

我在这里阅读：jQuery's .on function doesn't seem to like 'load' event .load无法正常工作，＆＃34;在所有浏览器中，加载事件都没有冒泡＆＃34;。

我试图不使用$（function（）{ta​​bs（）;}）;在每个页面上我需要＆＃39;标签＆＃39;运行的功能。那么当div .tabswrap类加载到文档中时，如何从页面运行函数？

动态加载的页面有一个名为＆＃39; tabswrap＆＃39;：

的div类

标签功能：

function tabs(){
//do something
}

如果我将脚本放在动态加载的页面上（我试图避免），这确实有效：

<script>
$(function(){
   tabs();
});
</script>

这些不能工作：

$('.tabswrap').on('load', function(){
   tabs();
});

$('.tabswrap').load(function(){
   tabs();
});

Answer 1

当您加载动态内容并执行操作时，您可以通过trigger举办自己的活动。

var data=".myclassname";
$('body').trigger('tabswrapOnLoad');
....
$('body').on('tabswrapOnLoad', data, function(){ do stuff });

Answer 2

我从你的故事中得到的是你用div.tabswrap加载动态内容，每当加载新内容时，你想执行tabs（）函数，对吗？

它不起作用的原因是你试图绑定到一个尚不存在的元素。您只能绑定存在的元素上的事件。当您将节点插入dom时，也不会触发load事件，因此即使在更新dom之后也不会起作用。尝试类似：

<script> 
function tabs() {
    // something
}

function loadNewContent() {
   // get dynamic content from somewhere
   $('.content').html(newContent);
   if ($('.tabswrap', $(newContent)).size() > 0) {
       tabs();
   }
}
</script>

Answer 3

正如我在评论中所说：我们必须为一组需要任意应用于加载页面的插件解决这个问题。

解决方案：我们在Ajax加载中触发自己的“panel.loaded”事件，将新面板作为属性传递。顶级页面代码捕获panel.loaded事件并根据加载页面中的匹配类应用插件。

e.g。

在Ajax加载中：

var e = jQuery.Event("panel.loaded", {$panel: data});
$(document).trigger(e);

在母版页内：

$(document).on('panel.loaded' function(e){
    // 1) Find a specific part of the loaded panel
    tabs(e.$panel.find('.tabswrap'));

    // Or 2) simply pass the loaded panel to tabs
    tabs(e.$panel);

    // Or 3) you don't really care about the panel loaded and 
    //       will simply apply tabs again to the entire page 
    tabs();
});

此实现意味着可以将加载的面板作为参数的tabs（）版本。否则可能会重新应用整个页面。这是您的电话，因为您没有提供tabs()的代码。

简单样机：http://jsfiddle.net/TrueBlueAussie/z4GK7/3/

更简单的版本。

您还可以将其他单独的属性对象传递给trigger，从而无需创建Event对象。

e.g。

$(document).trigger("panel.loaded", {$panel: data});

并使用：

$(document).on('panel.loaded' function(e, params){
    // 1) Find a specific part of the loaded panel
    tabs(params.$panel.find('.tabswrap'));

    // Or 2) simply pass the loaded panel to tabs
    tabs(params.$panel);

    // Or 3) you don't really care about the panel loaded and 
    //       will simply apply tabs again to the entire page 
    tabs();
});