用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>

一切都是一样的，除了我改变的确切文本。通过diff工具验证

但是，当我实际做更改时，如:

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

如果海报对页面有完全的控制权，.live()会很好，但他们没有。而且，他想要的文本甚至不在<span>或其他东西中，所以他可以更仔细地瞄准它。: - (

当您使用.html(...)时，您所选择的元素的内容将使用.innerHtml替换。这将销毁所有已经存在的DOM元素，以及所有已注册的事件。

最好的办法是从jQuery集合中取出真正的DOM节点，遍历它的子节点，直到找到所需的文本节点，并用新的文本节点替换它。要小心，因为不同的浏览器可以提供不同的文本节点排列——您可能必须删除多个节点才能使其正确，并且在不同的浏览器或版本上可能会有所不同。: - (

Answer 2

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

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

一个简单的解决方案是用.live('click',function代替.click(function，这将解决你的问题。如果你想要一个更好(更稳定和更快)的解决方案，那么使用jQuery委托，但这对于简单的应用程序来说是不必要的。

弗雷德

Answer 3

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

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