Javascript 按钮的jquery事件处理程序只工作一次

我正在制作一个类似twitter的社交网站。 当用户想要编辑一篇文章时，我打开一个div，附加一个textarea、“save”按钮和一个带有jquery的“cancel”按钮

但是“取消”按钮只工作一次，当用户第二次单击以编辑帖子时，“取消”按钮不再工作

$(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;
     });

---

最好在事件处理程序上使用

上的
来委托
，因为您的div1是动态创建的

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

缺少关闭
编辑
功能
可能与关闭有关。尝试：

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

试试这个。。将事件与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;

});

$（函数（）{
功能编辑（chirp_id）{
var div1=$（''）；
div1.addClass（'thumb2'）；
div1.attr（'id'，chirp_id）；
$（div1.css（'display'，'none'）；
如果（$（div1）.is（':visible'））{
返回；
}否则{
//在“取消”按钮之前，我添加了文本区域和“保存”按钮
var cancel=$（''）；
cancel.attr（“id”，“cancelEdit”）；
取消。文本（“取消”）；
cancel.addClass（'button'）；
取消。附录（第2部分）；
取消。单击（函数（）{
美元（第1部分）。淡出（“缓慢”）；
});
}
我的编辑=编辑；
});
这只是另一个包含文本区域和2个按钮的div。div2和附加到div1，并在发布的第一个块上查找关闭函数的缺少括号。我尝试使用代理…它仍然只起作用一次。第二次取消按钮不再起作用，我不明白是什么原因导致了这种情况！
$(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;

});