javascript - 无法让 .replaceWith() 正常工作

Question

我已经用 .toggle() 和下面更长的形式试过了。如果我取出 .replaceWith 的行，它可以很好地显示和隐藏#the-form，但它在... #the-form 取消隐藏和#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>

更新:从引号中删除了反斜杠。

更新 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

您正在使用点击处理程序，但您需要使用实时点击处理程序，因为您正在重新创建整个#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');
            }
    });

实时处理程序处理动态创建的元素，例如您正在重新创建的元素。