jQuery / Javascript replace function only works once
<p>I have a button as such</p>

<pre><code>&lt;button id="toggle_photo"&gt;
&lt;span id="photo_text"&gt;Hide Photos (1)&lt;/span&gt;
&lt;img class="icon" alt="Photos" src="/img/photos-16.png"&gt;
&lt;/button&gt;
</code></pre>

<p>And jQuery / Javascript to change the text upon clicking</p>

<pre><code>$('#toggle_photo').click(function(){
    var text = $('#photo_text').text();
    $('#photo_text').text(
      text.match(/Hide Photos/) ? text.replace("Hide", "Show") : text.replace("Show", "Hide"));
    $('.photo_frame').toggle('slow');
  });
</code></pre>

<p>This works the first time the button is clicked and the button text changed from <code>Hide Photo (1)</code> to <code>Show Photo (1)</code>. Next, the button html is replaced with new text via an AJAX call, new contents are the same except perhaps for the count, so it might show this instead</p>

<pre><code>&lt;button id="toggle_photo"&gt;
&lt;span id="photo_text"&gt;Hide Photos (3)&lt;/span&gt;
&lt;img class="icon" alt="Photos" src="/img/photos-16.png"&gt;
&lt;/button&gt;
</code></pre>

<p>However, this time the element didn't trigger a click event, why?</p>
