Does replacing text with html() affect click events/form submissions?
<p>I'm just changing some text on a CMS site that I only have access to via custom javascript allowed in the head section. An older jquery is in use (1.4.4). I'm actually calling a external script file in the head which waits until the DOM has loaded before running.</p>

<p>A debug version looks good:</p>

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

<p>which gives:</p>

<p>Before:</p>

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

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

<p>After:</p>

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

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

<p>Everything is identical except for the exact text I've changed. Verified via a diff tool.</p>

<p>However when I actually do the change, as in:</p>

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

<p>everything looks good on screen but the buttons inside this element no longer respond to clicks. Is there some form submission registration mechanism that gets mucked up?</p>
