jQuery 递归加载布局

Question

我正在尝试创建一个脚本，该脚本使用 src 属性集从div 加载内容。加载该内容后，我希望从加载的内容中设置了src属性的任何div也加载更多内容等。我尝试使用 on 函数，它似乎适用于"操作"事件，例如单击或提交，但使用 on("load"，选择器似乎不会传播事件。

这是我目前拥有的：

jQuery("body").on("load", "div[src]", function () {
jQuery(this).load(jQuery(this).attr("src"));
});

谢谢你们的帮助。

Answer 1

内容元素上没有加载事件

这是一个简单的插件方法，它查看每个新内容加载的内部并在新元素上初始化相同的插件

(function($) {
$.fn.loadMore = function() {
//iterate all elements in collection
return this.each(function() {
//ajax load content for each element instance
var $el = $(this), url = $el.data('src');
$el.load(url, function() {
// new content was loaded...initialize again on applicable new elements
$el.find('[data-src]').loadMore();
});
})
}
})(jQuery);
// on page load start loading
jQuery(function($) {
$('[data-src]').loadMore()
})

请注意，data-src属性使用 html5data-属性，而不是仅使用src。

演示