Question

我有一个按钮

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

jQuery / Javascript在点击

时更改文字

$('#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');
  });

这是第一次点击按钮并且按钮文字从Hide Photo (1)更改为Show Photo (1)时有效。接下来，通过AJAX调用将按钮html替换为新文本，除了计数之外，新内容是相同的，因此它可能会显示此内容

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

但是，这次元素没有触发点击事件，为什么？

Answer 1

你自己已经给出了答案：

接下来，按钮html通过AJAX调用替换和新文本...

您正在移除当前元素并添加新元素。元素可能属于同一类型且具有相同的ID，但它们仍然是不同的元素。

您必须在更改HTML后再次绑定事件处理程序，或使用.live() ^[docs]或.delegate() ^[docs]绑定事件处理程序。

编辑：我实际上不确定您是替换整个按钮还是仅替换其内容。但我认为这是问题所在。如果这没有帮助，您必须更具体，并发布替换HTML的功能。

jQuery / Javascript替换功能只能工作一次

1 个答案: