iframe

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:///" target="_blank"></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()。您可以使用它在主体上放置一个侦听器，当匹配选择器的 child 有一个事件时，该侦听器将触发。例如：

$("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"});

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

iframe - body - after replacing innerHTML event listeners doesn't working

javascript

replace

innerhtml

event-listener