What would stop a jQuery function from firing after replacing HTML on the page with similar elements?
<p>If I have the following HTML:</p>

<pre><code>&lt;tr id="record_1" &gt;
&lt;td id="name_1"&gt;&lt;a href="#" class="logNameAndValue"&gt;Charles Dickens&lt;/a&gt;&lt;/td&gt;&lt;td id="value_1"&gt;A Christmas Carol&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>And another jQuery function is called to replace it with this:</p>

<pre><code>&lt;tr id="record_1" &gt;
&lt;td id="name_1"&gt;&lt;a href="#" class="logNameAndValue"&gt;Kurt Vonnegut&lt;/a&gt;&lt;/td&gt;&lt;td id="value_1"&gt;Slaughterhouse Five&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>After the replacement, the onClick function no longer works:</p>

<pre><code>$('a.logNameAndValue').click( function(event){
    console.log("clicked!");
});
</code></pre>

<p>I tried moving all jQuery functions from being defined inside the <code>&lt;body&gt;</code> tag to the <code>&lt;head&gt;</code> tag but it made no difference.</p>

<p>I've monitored activity in the Firebug Console and Net panels and <strong>Firebug doesn't indicate a click has taken place.</strong></p>

<p>But the <code>.click</code> works fine when the page is first loaded.</p>

<p>Any suggestions?</p>
