Не могу заставить .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');
            }
    });

Живые обработчики работают с динамически создаваемыми элементами, такими как тот, который вы воссоздаете.

Answer 2

Удалите обратную косую черту из двойных кавычек в атрибуте div id.Их не нужно экранировать, потому что строка уже заключена в одинарные кавычки.

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

Кроме того, переместите replaceWith() в функцию обратного вызова для show и hide.

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

Затем вам нужно снова присоединить событие click к # show-form.Вы можете присоединять события на лету, используя jQuery live(). Смотрите об этом здесь .

Так что, может быть, лучше использовать html().

Например,

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

Таким образом,вы не удаляете и не читаете новый элемент DOM, поэтому оригинальный слушатель события onclick остается без изменений.

Answer 3

Переходя к ответу:

Почему бы просто не использовать функцию html?jQuery ('# show-form'). html ('Скрыть форму') и наоборот