Question

我整个上午一直在寻找，但无法找到解决方法。

我正在开发一个带有大量延迟加载的Web应用程序。单击链接AJAXly将替换div中的内容以创建单页体验。

在某些方面，嵌入内容具有嵌入另一个动态添加元素的链接。这在Firefox中运行良好，但Chrome和Safari无法看到动态添加。记录只返回undefined。

这一切都是通过我为处理加载模块化内容而编写的插件完成的。通过数据属性提供了许多选项。

基本HTML代码：

<a href="someurl" data-target="#content" data-partial="#content">embed content</a>
<div id="content"><!-- my contents will be replaced by link above --></div>

点击第一个链接后的结果：

<a href="someurl" data-target="#content" data-partial="#content">embed content</a>
<div id="content">
    <a href="anotherurl" data-target="#morecontent" data-partial="#morecontent"><embed more content</a>
    <div id="#morecontent"><!-- my contents will be replaced by link above --></a>
</div>

在Firefox中，点击第二个链接会成功替换#morecontent的内容，但不能替换Chrome或Safari。

你可以在这里看到一个例子：

http://www.hants.gov.uk/ajax/libs/modular/demo/respomsivedemo.html

与点击相关联的插件代码（在所有实例中被触发）：

$.ajax({
    url: 'someurl',
    cache: false,
    success: function (data) {
        data = $(data).find(_settings.partial).html();
        //In Firefox these show the element ids. In Chrome/Safari - undefined
        console.log('_settings.target: '+_settings.target.attr('id'));
        console.log('Target in DOM: '+$('body').find(_settings.target).attr('id'));
        _settings.target['html']($(data));
    }
});

我还没有发布完整的代码集，但我确实知道：

单击事件正被添加到新插入的链接中，并成功触发。在所有实例中都会获取AJAX内容。使用$（data）.find（）将AJAX内容过滤到相关元素只有Firefox能够将新内容插入到首次加载页面时不存在的元素中。

我看过使用.on（） - 但这只适用于事件，我无法在任何地方看到我的插件中添加对DOM突变的检查。

使用WebKit中的jQuery访问动态嵌入的HTML元素

0 个答案: