.click перестает работать после использования replaceWith

Ладно, я застрял на этом некоторое время...

В основном у меня есть два способа, которыми я хочу, чтобы определенный div отображался. Я планировал создать функцию с replaceWith(), заменяющую #mainDiv другой версией #mainDiv.

Вот функция:

function switchToChoice(){
            $('#myCanvas2').replaceWith('<div id="yesBox" width="150" height="90"><img id="yes" src="Yes-Button.png" width="110" height="55"></div><div id="noBox" width="150" height="90"><img id="no" class src="No-Button.png" width="110" height="55"></div>');

        }

Это работает и создает поле div, которое я хочу, когда оно вызывается. В поле div есть два изображения, на которые можно щелкнуть, но действия щелчка не выполняются.

Это фрагмент кода, который не работает после replaceWith:

//If the user presses the Next button on the comment pages.
        $('#next').click(function() {
            $('#next').fadeTo(100, 0.25, function(){
                clearCanvas(ctx, c);
                wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
                textPos++;
            });
            switchToChoice();
            $('#next').fadeTo(100, 1);
        });

        //If the user presses the Yes button on the question pages.
        $('#yes').click(function() {
            alert("boobs");
            $('#yes').fadeTo(100, 0.25, function(){
                clearCanvas(ctx, c);
                wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
                textPos++;
            });
            $('#yes').fadeTo(100, 1);
        });

        //If the user presses the No button on the question pages.
        $('#no').click(function() {
            $('#no').fadeTo(100, 0.25, function(){
                clearCanvas(ctx, c);
                wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
                textPos++;
            });
            $('#no').fadeTo(100, 1);
        });

Я предполагаю, что что-то теряется при замене HTML, но я действительно не знаю, что. Я новичок в JQuery и провел как можно больше исследований, но кажется, что я просто хожу по кругу. Кто-нибудь может помочь?


html jquery replacewith
person lonewookie    schedule 06.05.2013    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Вы создаете элементы динамически, вам необходимо использовать делегирование событий с помощью on.

Ваши события будут привязаны только к элементам, существующим в DOM на тот момент. Поэтому вам нужно использовать делегированное событие, прикрепив событие к документу или к родительскому элементу, который существует в любой момент времени. Вы можете сделать это, используя on()

     $(document).on('click', '#next', function() {
        $(this).fadeTo(100, 0.25, function(){
            clearCanvas(ctx, c);
            wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
            textPos++;
        });
        switchToChoice();
        $(this).fadeTo(100, 1);
    });

    //If the user presses the Yes button on the question pages.
    $(document).on('click','#yes', function() {
        alert("boobs");
        $(this).fadeTo(100, 0.25, function(){
            clearCanvas(ctx, c);
            wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
            textPos++;
        });
        $(this).fadeTo(100, 1);
    });

    //If the user presses the No button on the question pages.
     $(document).on('click','#no', function() {
        $(this).fadeTo(100, 0.25, function(){
            clearCanvas(ctx, c);
            wrapText(ctx, questionList[textPos], x, y-20, 275, 15);
            textPos++;
        });
        $(this).fadeTo(100, 1);
    });
person PSL    schedule 06.05.2013
comment
Помимо этого, когда вы находитесь внутри события, вы можете ссылаться на элемент с помощью $(this) - person PSL; 06.05.2013
comment
Спасибо большое! Я читал о .on, но толком не понял и не смог найти ни одного примера, подходящего для моего кода. - person lonewookie; 06.05.2013

arrow_upward
2
arrow_downward

Вы правы, когда вы заменяете html, событие прерывается.

Когда я смотрю на то, чем вы его заменяете, на нем нет элемента с событием #next. У вас есть идентификаторы yesBox, yes, noBox и no, но ничего с рядом. Это означает, что вы не нажимаете на что-либо, что соответствует критериям.

ИЗМЕНИТЬ

Поскольку поля #yes и #no, к которым вы пытаетесь получить доступ, не существуют до тех пор, пока вы не замените HTML, события не могут быть привязаны к ним так, как вы пытаетесь.

Вместо этого попробуйте что-то вроде этого:

$('#myCanvas').on('click', '#yes', function(){})

Это фактически привязывает событие к div myCanvas, НО срабатывает только для дочерних элементов с идентификатором yes (второй параметр функции on).

Таким образом, событие привязывается к div, который остается даже после замены HTML.

person taylonr    schedule 06.05.2013
comment
Я сожалею, что не включил их. Есть еще два вызова .click() для полей #yes и #no div. Они в основном идентичны тому, что я разместил для #next. Я обновил вопрос. - person lonewookie; 06.05.2013
comment
И .click для #no и #yes не работают. - person lonewookie; 06.05.2013
comment
Спасибо большое! Я читал о .on, но толком не понял и не смог найти ни одного примера, подходящего для моего кода. - person lonewookie; 06.05.2013