javascript - 我的按钮的 jquery 事件处理程序只工作一次

Question

我正在制作一种类似于 twitter 的社交网络网站。当用户想要编辑帖子时，我打开一个 div 附加一个 textarea、一个“保存”按钮和一个带有 jquery 的“取消”按钮。

但是取消按钮只能工作一次，第二次用户点击编辑帖子时，取消按钮不再工作。

$(function() 
{    
    function edit(chirp_id)
    {
        var div1 = $('<div></div>');
        div1.addClass('thumb2');
        div1.attr('id', chirp_id);
        $(div1).css('display','none');

        if($(div1).is(':visible'))
        {
            return;
        } 
        else
        {
            // Before the 'cancel' button I append the textarea and 'save' button

            var cancel = $('<button></button>');
            cancel.attr("id","cancelEdit");
            cancel.text("Cancel");

            cancel.addClass('button');
            cancel.appendTo(div2);

            $('#cancelEdit').click(function()
            {
                $(div1).fadeOut("slow");
            });
        }

        my_edit = edit;
     });

我用javascript调用我的函数

function edit_chirp(chirp_id)
{
    my_edit(chirp_id);
}

Answer 1

试试这个 .. 用 dom 绑定事件而不是 ID ..

$(function () {

function edit(chirp_id) {
    var div1 = $('<div></div>');
    div1.addClass('thumb2');
    div1.attr('id', chirp_id);
    $(div1).css('display', 'none');

    if ($(div1).is(':visible')) {
        return;
    } else {
        //Before the 'cancel' button I append the textarea and the 'save' button
        var cancel = $('<button></button>');
        cancel.attr("id", "cancelEdit");
        cancel.text("Cancel");

        cancel.addClass('button');
        cancel.appendTo(div2);

        cancel.click(function () {
            $(div1).fadeOut("slow");
        });
    }
    my_edit = edit;

});

Answer 2

更好地delegates使用.on事件处理程序，因为您的 div1 是动态创建的

$(document).on('click', '#cancelEdit', function () {
                $(div1).fadeOut("slow");
            });

缺少关闭edit功能

Answer 3

可能与关闭有关。尝试：

cancel.click(function (event) {
    $(event.target).closest(".thumb2").fadeOut("slow");
});