Как восстановить JQuery событий на удаленном элементе? - PullRequest
Новая
       35

Как восстановить JQuery событий на удаленном элементе?

2 голосов
/ 09 мая 2020

С этим PHP я добавляю следующее HTML. Я использую PHP, потому что получаю информацию из базы данных, но в этом вопросе это не имеет значения. 

<?php
    echo "
    <div id='user_bio_container'>
    <p id='user_bio'>My bio<i id='user_bio_edit' class='fas fa-edit'></i></p>
    </div>
    ";
?>

Это сценарий, который у меня есть. Когда пользователь щелкает био-абзац, он сохраняет внутреннюю часть абзаца в переменной, затем очищает контейнер и добавляет форму. Если форма отменена, я хочу удалить форму и добавить предыдущий HTML, который у меня был в абзаце. Проблема в том, что когда я пытаюсь это сделать, новый абзац не реагирует на события (наведение курсора, щелчок ...). 

    $('#user_bio_edit').css("display", "none");
    $(document).ready(function(){
        $("#user_bio").on('mouseover', function(){
            $('#user_bio_edit').css("display", "inline");
        });

        $("#user_bio").on('mouseleave', function(){
            $('#user_bio_edit').css("display", "none");
        });

        $("#user_bio").on('click', function(){
            var actualbio = $("#user_bio_container").html();
            $('#user_bio_container').empty();
            var user_bio_form = 
            "<form id='change_user_bio'>" +
            "<span id='cancel_user_bio'>Cancel</span>"
            "</form>";
            $("#user_bio_container").append(user_bio_form);

        //Button decision control
        $("#cancel_user_bio").on('click', function(){
            $("#user_bio_container").empty();
            $("#user_bio_container").append(actualbio);
            $('#user_bio_edit').css("display", "none");
        });

        });

    });

Я пробовал использовать hide() и show(), но после две отмененные формы перестают работать, и я продолжаю добавлять формы к HTML, которые не отображаются. Я также попытался переместить код управления решением кнопки за пределы события нажатия, но он тоже не работает.

1 Ответ

0 голосов
/ 09 мая 2020

Это проблема объема. actualbio недоступен за пределами $("#user_bio").on('click', function(){..}

Измените это

var actualbio = $ ("# user_bio_container"). html ();

От

до 

actualbio = $("#user_bio_container").html();

и используйте 

var actualbio = '';

чуть ниже 

$(document).ready(function(){

таким образом переменная actualbio доступна во всех обработчиках событий внутри $(document).ready

Что касается событий, которые не работают, проблема

Вам необходимо прикрепить такие события, поскольку #user_bio удаляется из dom вместе со всеми присоединенными событиями, когда вы очищаете html. 

$("#user_bio_container").on('mouseover', "#user_bio", function() {......})
...