我的按钮的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

最好使用.on事件处理程序的delegates因为你的div1是动态创建的

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

缺少关闭edit功能

Answer 2

试试这个..绑定事件与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 3

可能与关闭有关。 尝试：

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