my jquery event handler for a button only works once

Question

Im making a sort of like social network website like twitter. When the user wants to edit a post I open a div append a textarea, a "save" button and a "cancel" button with jquery.

But the cancel button only works once, the 2nd time the user clicks for editing a post, the cancel button doesn't work anymore.

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

I call my function with javascript

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

Its just another div that contains the textarea and the 2 buttons. div2 and appended to div1 — EMAD SEYED
– EMAD SEYED, Commented Oct 15, 2013 at 12:23

Harry Bomrah · Accepted Answer · 2013-10-15 12:28:50Z

1

Try this .. bind event with dom not with 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;

});

answered Oct 15, 2013 at 12:28

Harry Bomrah

1,6681 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen · Accepted Answer · 2013-10-15 12:48:59Z

1

Better use delegates using .on event handler because your div1 is created dynamically

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

Missing to close edit function

edited Oct 15, 2013 at 12:48

answered Oct 15, 2013 at 12:23

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

2 Comments

emerson.marini Over a year ago

And also look for a missing bracket closing your function on the first block posted.

EMAD SEYED Over a year ago

I have tried using the delegates...it still only works once. The 2nd time the cancel button doesn't work anymore

R. Oosterholt · Accepted Answer · 2013-10-15 13:17:28Z

0

probably to do with closure. try:

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

edited Oct 15, 2013 at 13:17

answered Oct 15, 2013 at 12:24

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

1 Comment

EMAD SEYED Over a year ago

I don't understand what can be causing this!

Collectives™ on Stack Overflow

my jquery event handler for a button only works once

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related