jQuery - dynamic added button click not working

Question

I wrote the following code creating a popup with dynamic added content. Now I want to delete these added items or edit them, but it didn't seem to fire an event clicking one of those buttons (btnLSM_Remove + btnLSM_Edit). Any clues why it is so? btnLSM_Add and btnLSM_Okay work the same way and they do work...

function ListManagementDialog(obj, dialogTitle, dialogText, listDelimiter, btnNames) {
    if (!$.isArray(btnNames)) {        
        return false;
    }

     if (dialogConfirmed) {
        return false;
    }

    btns[btnNames[0]] = function () {
        $(this).dialog('close');
        dialogConfirmed = true;
        if (obj) {
            obj.click();
        }
    };

    btns[btnNames[1]] = function () {
        $(this).dialog('close');
    };



    $('body').append(String.Format('<div id="divLSM_Dialog" title="{0}"><p>{1}</p>' +
        '<button id="btnLSM_Add" class="btnAdd" type="button" role="button" aria-disabled="false" title="Hinzuf&#252;gen" />' +               
        '<input id="txbLSM_Emailadresse" class="text ui-widget-content ui-corner-all" type="text" name="txbLSM_Emailadresse" style="display:none;">' +
        '<button id="btnLSM_Okay" class="btnOkay" type="button" role="button" aria-disabled="false" title="&#220;bernehmen" style="display:none;" />' +
        '<br /><br />' +
        '<table id="tblLSM_Items" class="ui-widget ui-widget-content">' +
                 '<thead>' +
                        '<tr class="ui-widget-header ">' +
                '<th>Emailadresse</th>' +
                '<th />' +
                '</tr>' +
            '</thead>' +
            '<tbody />' +
        '</table>' +
        '</div>', dialogTitle, dialogText));

    $('#btnLSM_Add').click(function () {
        $('#txbLSM_Emailadresse').val('');
        $('#txbLSM_Emailadresse').show();
        $('#btnLSM_Okay').show();
        $('#txbLSM_Emailadresse').focus();
    });  

    $('#btnLSM_Okay').click(function () {
        $('#tblLSM_Items tbody').append('<tr>' +
            '<td>' + $('#txbLSM_Emailadresse').val() + '</td>' +
            '<td>' + '<button id="btnLSM_Remove" class="btnRemove" type="button" role="button" aria-disabled="false" title="Entfernen" />' + '<button id="btnLSM_Change" class="btnEdit" type="button" role="button" aria-disabled="false" title="&#196;ndern" />' + '</td>' +
            '</tr>');

        $('#txbLSM_Emailadresse').hide();
        $('#btnLSM_Okay').hide();
    });

    $('#btnLSM_Remove').click(function () {
        alert("hohoho"); //no alert-popup
    });   

     $('#btnLSM_Change').click(function () {
        alert("hohoho"); //no alert-popup
    });

    $('#divLSM_Dialog').dialog({
        modal: true,
        resizable: false,
        draggable: true,
        width: 600,
        height: 300,
        close: function (event, ui) {
            $('body').find('#divLSM_Dialog').remove();
        },
        buttons: btns
    });

    return dialogConfirmed;
}

Denys Séguret · Accepted Answer · 2012-10-05 07:15:04Z

8

Your btnLSM_Remove button doesn't exist when you call

$('#btnLSM_Remove').click(function () {

So the $('#btnLSM_Remove') collection is empty and the handler is added to nothing.

You may use the on function:

$('#divLSM_Dialog').on('click', '#btnLSM_Remove', function () {

to register an handler that will apply to a button appearing after the delegation definition.

EDIT :

In jQuery 1.6.2, you may use live :

$('#btnLSM_Remove').live('click', function () {

edited Oct 5, 2012 at 7:15

answered Oct 4, 2012 at 17:56

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

5 Comments

UNeverNo Over a year ago

It might work but unfortunately we're still using 1.6.2 and when I try to change that to 1.8.2 my entire popup gets nonfunctional somehow. Any ideas why it is so?

Denys Séguret Over a year ago

Hard to say why your code would work in 1.6.2 and not 1.8.2 but I edited my answer to give a working syntax for jQuery 1.6.2.

UNeverNo Over a year ago

As it seems the "normal" dialogs didn't work either. Was there any change from 1.6.2 to 1.8.2? Or do I need to get the latest jQuery UI also? We use 1.8.16 at the moment.

Denys Séguret Over a year ago

Of course there was a lot of changes. You should always use a version of UI at least as recent than the version of core you use. I would try using last stable UI (1.8.24) but it's hard to tell what's the bug like this.

UNeverNo Over a year ago

Okay, for the moment I'll go with the live-implementation. Thanks for your help :-)

Collectives™ on Stack Overflow

jQuery - dynamic added button click not working

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related