Jquery .click () не работает после изменения HTML

Question

Это довольно просто, у меня есть кнопка, и когда вы нажимаете на нее, она меняется. Но после его изменения событие .click() не работает с ним, а работает с элементами div, которые уже находятся на странице

$('#editBioButton').click(function(){
       /* this captures html text and replaces it with textbox */
           var oldBio = $('.bioText').html();
        $('.bioText').replaceWith(' <textarea name="newBio" rows="6" cols="30" > ' + text + ' </textarea>');
       /* this switches button */
        $('#editBioButton').replaceWith(' <div id="saveBioText"> Save Changes </div> ');
       /* this div won't react when clicked */
        $('#saveBioText').click(function(){
           alert('itowrks');
        });

    });

Answer 1

Я сталкивался с той же проблемой раньше.Оказывается, jQuery теряет все привязки к элементам, которые добавляются после загрузки.Вы должны использовать delegate метод

$("#editBioButton").delegate("#saveBioText", 'click', function(){
  alert("this.");
});

Answer 2

$('#editBioButton').click(function(){
    var oldBio = $('.bioText').html();
    $('.bioText').replaceWith(' <textarea name="newBio" rows="6" cols="30" > ' + text + ' </textarea>');
    $('#editBioButton').replaceWith(' <div id="saveBioText"> Save Changes </div> ');
    $(document).on('click', '#saveBioText', function(){
        alert('it works');
    });
});

Answer 3

Метод click не работает для элемента, добавленного после загрузки страницы, вместо этого вы можете использовать метод live с click event

$("#editBioButton").live('click', function(){
   ...
});

Answer 4

использование:

$(selector).live('click',function(){ });

Answer 5

Предпочтительный способ написать это с помощью on:

$(document).on("click", "#saveBioText", function() {
  alert('this');
});