Button Onclick Event Triggered Too Many Times In A Jquery Mobile Dialog

I'm using jQuery Mobile 1.1.1 and am using Dialogs. I'm using the dialog to choose which element to add to a

. I've googled and search for similar issue on SO but no luck

Solution 1:

Everytime you call addPopup, you keep on attaching the click event to OkButtonPopup, hence, the event handler gets called a couple of times. You can try to attach the event through bind and unbind it prior to binding. You can do it this way:

$('#OkButtonPopup').unbind("click").bind("click", function() {
                $('#activate_ul').append('<li>' + $('#element-list').val() +'</li>');

                // remove element from corresponding arrayif ($('#element-type').val() == 'Input' ) {
                    removeByValue(all_inputs, $('#element-list').val());
                }
                if ($('#element-type').val() == 'Output' ) {
                    removeByValue(all_outputs, $('#element-list').val());
                }
                if ($('#element-type').val() == 'Zone' ) {
                    removeByValue(all_zones, $('#element-list').val());
                }
            });

Or you can also attach the click event on pageshow instead of doing it in addPopup. That way you bind it only once.