用html（）替换文本会影响点击事件/表单提交吗？

Question

我只是在CMS网站上更改了一些我只能通过头部允许的自定义JavaScript访问的文本。正在使用较旧的jquery（1.4.4）。我实际上是在头部调用一个外部脚本文件，它在运行之前一直等到DOM加载。

调试版看起来不错：

var openid_element = $('div#block-text div.inner');
console.log(openid_element.html());          
console.log (openid_element.html().replace('If you would like to register or just log in, please select your OpenID provider:', 'No need to create a new account if you have one with Google/Yahoo/...'));

给出：

在：

If you would like to register or just log in, please select your OpenID provider:
<br>
<br>
<form action="/users/login" id="openid" method="post" style="background-image: none; "><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="lW1uEwwE/8WkHByxVwbDtnBDVUc5vFTKkRw9T717Myo="></div>

<div id="openid_btns"><div id="openid_highlight"><a title="Google" href="#" id="btn_0" class="openid_large_btn Google"></a></div><a title="Yahoo" href="#" id="btn_1" class="openid_large_btn Yahoo"></a><a title="AOL" href="#" id="btn_2" class="openid_large_btn AOL"></a><a title="Launchpad" href="#" id="btn_3" class="openid_large_btn Launchpad"></a><a title="OpenID" href="#" id="btn_4" class="openid_large_btn OpenID"></a><br><a title="MyOpenID" href="#" id="btn_5" class="openid_small_btn MyOpenID"></a><a title="Flickr" href="#" id="btn_6" class="openid_small_btn Flickr"></a><a title="Technorati" href="#" id="btn_7" class="openid_small_btn Technorati"></a><a title="Wordpress" href="#" id="btn_8" class="openid_small_btn Wordpress"></a><a title="Blogger" href="#" id="btn_9" class="openid_small_btn Blogger"></a><a title="Verisign" href="#" id="btn_10" class="openid_small_btn Verisign"></a><a title="Vidoop" href="#" id="btn_11" class="openid_small_btn Vidoop"></a><a title="ClaimID" href="#" id="btn_12" class="openid_small_btn ClaimID"></a><a title="LiveJournal" href="#" id="btn_13" class="openid_small_btn LiveJournal"></a><a title="MySpace" href="#" id="btn_14" class="openid_small_btn MySpace"></a><div id="openid_inputarea" style="display: block; ">Select your account provider.</div></div></form>
<div id="twitter-and-facebook">
<a href="/twitter/start" id="twitter_auth" title="Twitter">Sign in with Twitter</a>
</div>

后：

No need to create a new account if you have one with Google/Yahoo/...
<br>
<br>
<form action="/users/login" id="openid" method="post" style="background-image: none; "><div style="margin:0;padding:0;display:inline"><input name="authenticity_token" type="hidden" value="lW1uEwwE/8WkHByxVwbDtnBDVUc5vFTKkRw9T717Myo="></div>

<div id="openid_btns"><div id="openid_highlight"><a title="Google" href="#" id="btn_0" class="openid_large_btn Google"></a></div><a title="Yahoo" href="#" id="btn_1" class="openid_large_btn Yahoo"></a><a title="AOL" href="#" id="btn_2" class="openid_large_btn AOL"></a><a title="Launchpad" href="#" id="btn_3" class="openid_large_btn Launchpad"></a><a title="OpenID" href="#" id="btn_4" class="openid_large_btn OpenID"></a><br><a title="MyOpenID" href="#" id="btn_5" class="openid_small_btn MyOpenID"></a><a title="Flickr" href="#" id="btn_6" class="openid_small_btn Flickr"></a><a title="Technorati" href="#" id="btn_7" class="openid_small_btn Technorati"></a><a title="Wordpress" href="#" id="btn_8" class="openid_small_btn Wordpress"></a><a title="Blogger" href="#" id="btn_9" class="openid_small_btn Blogger"></a><a title="Verisign" href="#" id="btn_10" class="openid_small_btn Verisign"></a><a title="Vidoop" href="#" id="btn_11" class="openid_small_btn Vidoop"></a><a title="ClaimID" href="#" id="btn_12" class="openid_small_btn ClaimID"></a><a title="LiveJournal" href="#" id="btn_13" class="openid_small_btn LiveJournal"></a><a title="MySpace" href="#" id="btn_14" class="openid_small_btn MySpace"></a><div id="openid_inputarea" style="display: block; ">Select your account provider.</div></div></form>
<div id="twitter-and-facebook">
<a href="/twitter/start" id="twitter_auth" title="Twitter">Sign in with Twitter</a>
</div>

除了我改变的确切文字外，一切都是完全相同的。通过差异工具验证。

然而，当我实际进行更改时，如：

openid_element.html(openid_element.html().replace('If you would like to register or just log in, please select your OpenID provider:', 'No need to create a new account if you have one with Google/Yahoo/...'));

屏幕上的一切看起来都不错，但此元素中的按钮不再响应点击。是否有一些表单提交注册机制被搞砸了？

Answer 1

这是因为你实际上是在改变HTML中的元素，所以按钮实际上是新的DOM元素，因此当它们被单击时，不会触发函数/回调，因为$(anelement).click()实际上将函数绑定到那个/那个特定元素 那个时候，而不是选择器（ID，类等），所以这个函数没有绑定到 new 元件。

要解决此问题，您需要使用live，因为这会将函数绑定到具有该选择器的任何元素，即使它是将来创建的

一个简单的解决方案是将.click(function替换为.live('click',function，这将解决您的问题。如果您想要更好（更稳定，更快）的解决方案，请使用jQuery delegates，但这对于简单的应用程序来说并不是必需的。

佛瑞德

Answer 2

如果海报完全控制了页面，.live()会很棒，但事实并非如此。而且，他想要的文字甚至不是<span>或者其他东西，所以他可以更仔细地定位它。 ： - （

使用.html(...)时，您使用.innerHtml替换所选元素的内容。这将破坏那里的所有DOM元素，以及任何已注册的事件。

您最好的选择是将真正的DOM节点从您的jQuery集合中拉出来，并让它的子节点直到您找到所需的文本节点，并将其替换为新的文本节点。请注意，因为不同的浏览器可以提供不同的文本节点排列 - 您可能必须删除多个节点才能使其正确，并且在不同的浏览器或版本上可能会有所不同。 ： - （

Answer 3

使用live附加提交事件处理程序..docs - live

$('#openid').live('submit', function(){
// whatever you want to do

}