无法得到.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'); 
      } 
    }); 

现场处理工作的动态创建的元素，如您重新创建一个。