如何在删除并再次添加后使功能正常工作

Question

我不确定这是什么标题.我的问题是,点击并更改标题后,它不再启动on click了.

请看下面的小提琴:

小提琴

HTML

<h2><span class="ss-icon ss-repeat"></span> 
        <span id="campaignEditTitle">Click Me to Edit <small><span class="ss-write"></span></small></span>
        <small> &nbsp; 3 Messages (2 active, 1 draft)
        </small>
      </h2>

JS

$('#campaignEditTitle').on('click', function(){
        var title = $(this).text();
        $(this).replaceWith('<input id="campaignInputTitle" type="text" value="' + title + '">');
        console.log(title);

        $('#campaignInputTitle').keypress(function(e) {
            if(e.which == 13) {
                var newTitle = $(this).val();
                $(this).replaceWith('<span id="campaignEditTitle">' + newTitle + '<small><span class="ss-write"></span></small>');
            }
        });
        $('#campaignInputTitle').on('blur', function(){
            var newTitle = $(this).val();
            $(this).replaceWith('<span id="campaignEditTitle">' + newTitle + '<small><span class="ss-write"></span></small>');
        });        
    });

Answer 1

通过使用事件委派:

$('body').on('click','#campaignEditTitle', function(){
    var title = $(this).text();
    $(this).replaceWith('<input id="campaignInputTitle" type="text" value="' + title + '">');
    console.log(title);

});

$('body').on('keypress','#campaignInputTitle',function(e) {
        if(e.which == 13) {
            var newTitle = $(this).val();
            $(this).replaceWith('<span id="campaignEditTitle">' + newTitle + '<small><span class="ss-write"></span></small>');
        }
});

$('body').on('blur','#campaignInputTitle', function(){
        var newTitle = $(this).val();
        $(this).replaceWith('<span id="campaignEditTitle">' + newTitle + '<small><span class="ss-write"></span></small>');
});