button onClick works one time

Question

User-2132746437 posted

I have a partial view that has a dropdown and a button on it, when I click it for the first time it works and opens a dialog box, when I close the dialog box, the button no longer works. How can I "reset" the page and get the button to fire more then once?

@script section {
<script type="text/javascript">
       $(function() {
            $.ajax({
                // binds the dropdown box on the page

             });


           $(document).on('click', '#btnDialog', function() {
                  //opens the dialog box


           });
}
</script>

when the button is clicked for the first time it works, then after that it does not. This is the only JQuery code within the page

Answer 1

User475983607 posted

This symptom often indicates the DOM is overwritten with new HTML.  This breaks any events wired up when the page initially loaded.

Answer 2

User-2132746437 posted

Ok, thats I kind of thought, looking for a solution for it

Answer 3

User475983607 posted

csharpcoder

Ok, thats I kind of thought, looking for a solution for it

Keep in mind that you have not provided enough code to reproduce the issue so I'm guessing the bug is due to overwriting the DOM.   Please use the browser's dev tools to debug your work.

But some possible solution for overwriting the DOM are...

Re-run the event wire up in the AJAX success handler.

Rethink the design and return JSON to the AJAX function.  Then bind the data to existing HTML rather than overwriting the HTML.

Answer 4

User-2132746437 posted

There is no error when running the dev tools.  JSON is being returned to the Ajax Call.  Nothing is being overwritten, just open a dialog box from the button click event. 

Answer 5

User-2132746437 posted

I got it working, I moved the button function to its own out of the JQuery function