iframe - 正文 - 替换 innerHTML 事件侦听器后不起作用 [重复]

Question

我在 innerHTML 事件监听器中替换 IP 地址后不起作用。

我的代码：

$( "iframe" ).load(function() { 
   $("iframe").contents().find("b").html(function(_, html) { 
      return html.replace(/(\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b)/, '<a href="http://$1/" target="_blank">$1</a>');
   });
});

iframe 中的 innerHTML 的一部分

 <a id="go" rel="leanModal" name="test_2" href="#event">2</a> <!--this anchor loses event listener -->
    <li>
        <ul>
            <li>
                <b>MyRouter1 - 192.168.1.1</b>
            </li>
            <li>
                <b>MyRouter2 - 192.168.1.2</b>
            </li>
        </ul>
    </li>

如何在不替换 innerHTML 或杀死 DOM 元素/事件侦听器的情况下使 IP 地址可点击？

Answer 1

如果您想创建即使在 HTML 更改后仍能继续工作的事件侦听器，请查看 $.on()。您可以使用它在主体上放置一个侦听器，当匹配选择器的子项有事件时，该侦听器将触发。例如：

$("body").on("click", "a",function(event){ doSomething(); });

只要点击a 标签，上面的代码就会调用它的事件处理程序。您可以将"a" 替换为您要监听的元素的选择器。即使更改了 DOM，它也会继续工作，因为侦听器位于 body 上。

编辑： 看来您可能正在使用 javascript 来编辑您未创建的现有页面。在这种情况下，在不破坏现有事件侦听器的情况下编辑标记将非常困难，因为您无法控制事件侦听器的创建方式。 此外，此特定问题可能与您的替换导致无效标记有关，因为您在现有的 a 中插入了 a 标记。

要使元素可点击而不弄乱内部 html，并对其进行样式设置以明确它是可点击的：

$("b").click(function(event){
    //handle your click here
    //window.location = "http://someurlhere"
}).css({"color":"blue","cursor":"pointer"});