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

Posted 2023-05-07

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

【英文标题】：iframe - body - after replacing innerHTML event listeners doesn't working [duplicate]

【发布时间】：2015-04-09 12:11:09

【问题描述】：

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

我的代码：

$( "iframe" ).load(function()  
   $("iframe").contents().find("b").html(function(_, html)  
      return html.replace(/(\b\d1,3\.\d1,3\.\d1,3\.\d1,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 地址可点击？

【问题讨论】：

什么事件监听器？你是如何将它们绑定到什么元素上的？

您想要在您插入的a 节点上使用事件侦听器吗？

不清楚您在问什么 请说明您的具体问题或添加其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。请参阅How to Ask 页面以获得澄清此问题的帮助。

“a”节点上的事件监听器... 2

我没有告诉你我的代码在greasemonkey脚本中。

【参考方案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");

【讨论】：

是的，我正在编辑不是我创建的页面。有没有其他方法可以创建可点击的 IP 地址？

我已经更新了我的答案，以展示如何在 javascript 中处理点击事件。您可以在事件处理程序中添加正则表达式逻辑以生成所需的 URL。

谢谢。这是解决方案... :)