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

iframe - body - 在替换innerHTML事件监听器之后不起作用

1 个答案: