Question

I have a small but weird problem with my code. Basically I have a page that when its called it runs a function and shows a list.

function showlist (arg) {

var len = arg;
if (len == 0) {
    $('#adminlist').empty();
    $('#adminlist').append('<li>No records found!</li>')
    $('#adminlist').append('<li><a id="newadmin">Add New..</a></li>')
            $('#adminlist').listview("refresh");
} else {
    // some other list

};

};

The list has an if clause, if “lenght is 0” then show one list, if its something else show other list.

I have a Jquery Mobile Popup that it’s triggered by clicking one of the items on the list.

$("#newadmin").on('click', function(event) {

    $("#adminname").val("");
    $("#popupNewAdmin").popup({overlayTheme: "a"});
    $("#popupNewAdmin").popup("open")

    $( "#save_new_admin_btn" ).on('click', function(){
        var newadminname = $("#adminname").val();
        var newadminnametrim = $.trim(newadminname);

        console.log('New Admin Name: ' + newadminnametrim);
    })

});

When triggered, the Popup clears the input textbox and when I click the “save_new_admin_btn” button it outputs on the console the text that I would have in the textbox.

The problem is that, if I close the close and re-open the Popup after clicking the button a couple times, the next time I click the button it outputs a huge amount of entries.

I hope I’m making myself clear enough.

Thanks in advance. 🙂

Answer 1

The problem is that you’re adding an event handler every time you click on #newadmin

take the second event outside the scope and give it a higher selector if the save button won’t be present until you’ve clicked on #newadmin.

$("#newadmin").on('click', function(event) {

    $("#adminname").val("");
    $("#popupNewAdmin").popup({overlayTheme: "a"});
    $("#popupNewAdmin").popup("open")



});

$( document ).on('click', "#save_new_admin_btn",  function(){
        var newadminname = $("#adminname").val();
        var newadminnametrim = $.trim(newadminname);

        console.log('New Admin Name: ' + newadminnametrim);
    })