用html（）替換文本是否會影響點擊事件/表單提交？

我只是改變了CMS網站上的一些文本，我只能通過head部分中允許的自定義javascript進行訪問。一個較老的jquery正在使用（1.4.4）。我實際上在頭部調用一個外部腳本文件，該文件在運行之前一直等待DOM加載。用html（）替換文本是否會影響點擊事件/表單提交？

調試版本看起來不錯：

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="https://stackoverflow.com/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="https://stackoverflow.com/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>

一切除了確切的文本相同我有c忌用。通過差異工具進行驗證。

然而，當我真正做了改變，如：

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/...'));

一切看起來很好在屏幕上，但該元素中的按鈕不再響應點擊。是否有一些表單提交註冊機制被破壞？

來源

2011-07-20 jontyc

雖然.live()將是巨大的，如果有海報在網頁完全控制，他們不這樣做。而且，他想要的文本甚至不在<span>之內，所以他可以更仔細地瞄準它。 :-(

當您使用.html(...)，元素的您選擇使用.innerHtml被替換的內容。這將會破壞是沒有任何DOM元素，並與他們任何註冊事件。

你最好的賭注將將真正的DOM節點從您的jQuery集合中拉出來，然後走路，直到找到所需的文本節點，然後用新的文本節點替換它。要小心，因爲不同的瀏覽器可以提供不同的文本節點排列方式 - 您可能需要刪除多個節點才能正確使用它，而且在不同的瀏覽器或版本中可能會有所不同。 :-(

來源

2011-07-20 11:30:21

這就是我在想什麼，但忘了提及它：D – Fred

聽起來像化妝變化的很多努力，我很驚訝有沒有更簡單的方法 – jontyc

如果你真的想要它很簡單，把文本放在一個''中，直接修改即可。 – Fred

使用live附加提交事件handler..docs- live

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

}

來源

2011-07-20 11:03:54 Vivek

這是因爲你實際上是在不斷變化的HTML元素，所以按鈕實際上是新的DOM元素，它們被點擊，所以當沒有函數/回調被觸發，因爲$(anelement).click()實際上綁定了一個函數到那個/那些特定元素在那個時候，而不是選擇器（ID，類等等），所以函數沒有綁定到new元素。

爲了解決這個問題，你需要使用live因爲這結合到具有選擇的任何元素的功能，即使是在未來

一個簡單的解決方案是創建了.live('click',function更換.click(function這將解決你的問題。如果您想要更好（更穩定，更快速）的解決方案，請使用jQuery delegates，但對於簡單應用來說這不是必需的。

弗雷德

來源

2011-07-20 11:12:36 Fred

用html（）替換文本是否會影響點擊事件/表單提交？

回答

相關問題