jQuery Ajax发布数据两次

Question

I have the following jquery script that is supposed to post data to the data base,

//delegated submit handlers for the forms inside the table
                                    $('#issue').on('click', function (e) {
                                        e.preventDefault();

                                        //read the form data ans submit it to someurl
                                        $.post('<?php echo base_url() ?>pharm_profile/dept_issue/', $('#Issues_Form').serialize(), function () {
                                            //success do something
                                            alert("Success Approved Successfully");
                                            var url = "<?php echo base_url() ?>pharm_profile";    
                                            $(location).attr('href',url);
                                        }).fail(function () {
                                            //error do something
                                            alert("Failed please try again later or contact the system administrator");
                                        })
                                    })

Whenever I click the button, the script runs twice / posts the data twice. How can I control that to only once?

Answer 1

This can happen if your DOM has more than one element "#issue" inside. This can happen, even if only one is shown, On the other hand, the "on" actually gets registered every time you add an element with id "issue". So if you on happen to add this elements dynamically, each time you add it, a new click event handler gets assigned...

To be pragmatic, because it doesn't seam that you really wanted that behavior... before the "on" registration use the off..

$('#issue').off('click');
$('#issue').on('click',function....);