的jQuery/JavaScript的替换功能只能使用一次

我有一个按钮，这样的jQuery/JavaScript的替换功能只能使用一次

<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)。接下来，该按钮HTML通过AJAX调用替换为新的文本，新的内容是相同的，除了可能的算的，所以它可能显示这个代替

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

不过，这一次的元素没有触发点击事件，为什么？

来源

2011-08-26 Bob

你已经给出了答案自己：

接下来，按钮的HTML是取代通过AJAX调用新的文本......

要删除的当前元素并加入一个新的。这些元素可能属于同一类型，并且具有相同的ID，但它们仍然是不同的元素。

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

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

来源

2011-08-26 23:33:53

感谢您的提示，我没有意识到“活”或“委托”方法，很好知道。实际上，整个按钮的内容被替换了，不仅仅是' Bob

只有内容或者按钮本身吗？ –

按钮本身也是。我试图让'delegate'语法工作正确地说，点击事件现在不会触发，这就是我所拥有的'$（'＃toggle_photo'）。委托（'按钮'，'点击'，功能（）{...' – Bob

的jQuery/JavaScript的替换功能只能使用一次

回答

相关问题