無法得到.replaceWith（）正常工作

Question

我試過這個.toggle（）和下面的更長的表單。如果我取出.replaceWith的行，它可以很好地顯示和隱藏＃表單，但是它可以......＃表單取消隱藏和＃show-form更改正確，但不適用於下次點擊。

任何人都可以看到我在做什麼錯？

<script type="text/javascript"> 
    jQuery('#show-form').click(
     function() { 
      if (jQuery("#the-form").is(":hidden")) { 
       jQuery('#the-form').show('fast'); 
       jQuery('#show-form').replaceWith('<div id="show-form">Hide Form</div>'); 
      } else { 
       jQuery('#the-form').hide('fast'); 
       jQuery('#show-form').replaceWith('<div id="show-form">Show Form</div>'); 
      } 
    }); 
</script> 

UPDATE：從報價刪除反斜槓。

更新2工作版本：

<script type="text/javascript"> 
jQuery('#show-form').live('click', 
    function() { 
     if (jQuery("#the-form").is(":hidden")) { 
      jQuery('#show-form').html('Hide Form'); 
      jQuery('#the-form').show('fast'); 
     } else { 
      jQuery('#show-form').html('Show Form'); 
      jQuery('#the-form').hide('fast'); 
     } 
}); 

感謝您的幫助！

Answer 1

搬家回答：

爲什麼不直接使用html函數呢？ jQuery（'＃show-form'）。html（'隱藏窗體'），反之亦然

Answer 2

從div id屬性中的雙引號中刪除反斜槓。他們不需要轉義，因爲字符串已經被單引號封裝了。

jQuery('#show-form').replaceWith('<div id="show-form">Hide Form</div>'); 

此外，將replaceWith()移動到顯示和隱藏的回調函數。

jQuery('#the-form').show('fast', function(e) { 
    jQuery('#show-form').replaceWith('<div id="show-form">Hide Form</div>'); 
}); 

那麼你就必須重新將點擊事件＃表演形式。您可以使用jQuery live()即時重新附加事件。 See about it here。

因此，使用html()代替它可能會更好。

例如

jQuery('#show-form').html('Hide Form'); 

這樣，你不刪除和readding一個新的DOM元素，因此原來的onclick事件偵聽器保持不變。

Answer 3

您正在使用點擊處理程序，但您需要使用實時點擊處理程序，因爲您正在重新創建整個＃show-form元素。

這應該工作：

jQuery('#show-form').live('click', 
     function() { 
      if (jQuery("#the-form").is(":hidden")) { 
       jQuery('#show-form').replaceWith('<div id="show-form">Hide Form</div>'); 
       jQuery('#the-form').show('fast'); 
      } else { 
       jQuery('#show-form').replaceWith('<div id="show-form">Show Form</div>'); 
       jQuery('#the-form').hide('fast'); 
      } 
    }); 

現場處理工作的動態創建的元素，如您重新創建一個。