javascript - 从 xml 和 jquery 呈现后链接不起作用

Question

我有一个加载到 index.html 上的基本新闻自动收报机 它从 xml 文件中提取 div 信息并自动更改行情屏幕上的数据。它在悬停时暂停并有前进和后退按钮

如果 feed 只是纯文本，一切都很好，但是我似乎无法让收报机接受可点击的链接。可点击的链接应该改变背景并打开一个包含更多信息的弹出窗口 这适用于页面上的手动链接

我能够通过 xml 文件上的 cdata 或将“a href”工作到将 xml 数据添加到具有适当 div 的页面的 jquery 中来显示链接

如果我手动添加带有链接的 div 到 html 页面，链接工作正常

在 js 代码之后，将以下内容添加到 html 中:

<div class="newsTicker active"><a href="#" id="open">Latest News updates/ticker 1</a></div>
<div class="newsTicker">Latest News updates/ticker 2</div>
<div class="newsTicker">Latest News updates/ticker 3</div>
<div class="newsTicker">Latest News updates/ticker 4</div>

当我检查页面时，信息已正确输入页面，但链接不起作用 有人可以帮忙吗!!

在这里找到主要代码---> http://jsfiddle.net/17h0wa28/5/

xml 页面非常基础，因此非技术人员可以根据需要即时更新它。

<?xml version="1.0" encoding="UTF-8"?>
<NEWSFEED>
    <STATUS>
        <UPDATE><![CDATA[<a href="#" id="open">Latest News updates/ticker 1</a>]]></UPDATE>
    </STATUS>
    <STATUS>
        <UPDATE>Latest News updates/ticker 2</UPDATE>
    </STATUS>
    <STATUS>
        <UPDATE>Latest News updates/ticker 3</UPDATE>
    </STATUS>
    <STATUS>
        <UPDATE>Latest News updates/ticker 4</UPDATE>
    </STATUS>
</NEWSFEED>

Answer 1

好的，你的问题来了。由于你的 anchor 标记是动态生成的，即在完全加载后附加到 DOM，你需要 event delegation ，将事件附加到动态添加的元素，如下所示:

点击 #open 元素的代码应修改为:

$(document).on('click','#open',function(e) { //event delegation
   e.preventDefault(); //prevent default action if necessary
   $('#pop_background').fadeIn();
   $('#pop_box').fadeIn();
   return false;
});

将 event 附加到 document，然后确定该点击是否来自 #open 元素。此外，如果您有任何其他要加载 #open 的静态元素，例如 dynamic elements 被附加到 DOM 中已经存在的 elements，然后你可以给出那个静态元素

的id