我的按钮的 jQuery 事件处理程序只工作一次

my jquery event handler for a button only works once

本文关键字：一次 工作 按钮 jQuery 事件处理 程序 我的      更新时间：2023-09-26

我正在制作一个像Twitter这样的社交网络网站。当用户想要编辑帖子时，我会打开一个div，使用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);
}

试试这个 .. 用 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;
});

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

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

缺少关闭edit功能

可能

与闭包有关。 尝试：

cancel.click(function (event) {
    $(event.target).closest(".thumb2").fadeOut("slow");
});
相关文章：