Ajax function works the first time, second time it doesn't?

Question

So... I was about to ask this question "how come my ajax functions (edit and delete) work the first time i use them, but if i run either one a second time without a full page refresh (regardless of which function i use first or which function i use second), the second time it doesn't work?".

By "doesn't work" i mean, for the edit function, the second time it attempts to load the editUrlForm.php file as usual, then just stops and leaves an empty div, or in the case of delete, it gives the error message from my "else" statement, then leaves an empty div, on page reload nothing has been deleted.

THIS PROBLEM SUDDENLY STOPPED HAPPENING FOR SEEMINGLY NO REASON!!!

QUESTION: Why? How? I don't understand...

AJAX functions:

   <script type="text/javascript">
       $(function() {
            $("#deleteUrl").click(function()    {
                $('#response').html('');
                    if ($('input:checkbox[name="ticked[]"]:checked').length !== 0) {
                       var tickedItems = $('input:checkbox[name="ticked[]"]:checked')
                       .map(function() { return $(this).val() })
                       .get()
                       //alert(tickedItems)
                       .join(",");

                       $.ajax({
                            type: "GET",
                            url: "deleteUrl.php",   
                            data: "id=" + tickedItems,                                        
                            success: function(msg)  {
                                 $('#response').html();      
                                 urlRefresh();
                            },
                            error: function () {
                                alert('error');
                            }
                       });
                    }
                    else {
                        alert('Please select at least one item to delete!')
                        return false;
                    }
            });
        });
    </script>

    <script type="text/javascript">
       $(function() {
            $("#editUrl").click(function()  {
                $('#response').html('');
                    if ($('input:checkbox[name="ticked[]"]:checked').length == 1) {
                       var tickedItems = $('input:checkbox[name="ticked[]"]:checked')
                       .map(function() { return $(this).val() })
                       .get()
                       .join(",");

                       $.ajax({
                            type: "GET",
                            url: "editUrlForm.php",   
                            data: "id=" + tickedItems,                                        
                            success: function(msg)  {
                                $('#response').empty();
                                $('#content01').html(msg).show();
                            },
                            error: function () {
                                alert('error');
                            }           
                       });
                    }
                    else {
                        alert('Only one item may be edited at a time. Please unselect all but one checkbox or insure you have one check box selected!')
                        return false;
                    }
            });
        });
    </script>

p.s. I understand this probably isn't the normal sort of question on stack over flow. But I'm absolutely stumped as to whats happened to stop this error happening... I also still don't understand what was causing the error in the first place. The browser console was clean, no errors given there, no syntax errors... If anyone has any input on this issue that may shed light on this please let me know.

EDIT:

index.html

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Video Link Storage App</title>

  <link rel="stylesheet" href="css/foundation.css">
  <script src="js/vendor/custom.modernizr.js"></script>

  <link rel="stylesheet" href="css/format.css">
  <script src="js/ajax.js"></script>

  <!-- jQuery Include -->
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

   <script type="text/javascript">
       $(function() {
            $("#deleteUrl").click(function()    {
                $('#response').html('');
                    if ($('input:checkbox[name="ticked[]"]:checked').length !== 0) {
                       var tickedItems = $('input:checkbox[name="ticked[]"]:checked')
                       .map(function() { return $(this).val() })
                       .get()
                       //alert(tickedItems)
                       .join(",");

                       $.ajax({
                            type: "GET",
                            url: "deleteUrl.php",   
                            data: "id=" + tickedItems,                                        
                            success: function(msg)  {
                                 $('#response').html();      
                                 urlRefresh();
                            },
                            error: function () {
                                alert('error');
                            }
                       });
                    }
                    else {
                        alert('Please select at least one item to delete!')
                        return false;
                    }
            });
        });
    </script>

    <script type="text/javascript">
       $(function() {
            $("#editUrl").click(function()  {
                $('#content02').html('');
                    if ($('input:checkbox[name="ticked[]"]:checked').length == 1) {
                       var tickedItems = $('input:checkbox[name="ticked[]"]:checked')
                       .map(function() { return $(this).val() })
                       .get()
                       .join(",");

                       $.ajax({
                            type: "GET",
                            url: "editUrlForm.php",   
                            data: "id=" + tickedItems,                                        
                            success: function(msg)  {
                                $('#response').empty();
                                $('#content01').html(msg).show();
                            },
                            error: function () {
                                alert('error');
                            }           
                       });
                    }
                    else {
                        alert('Only one item may be edited at a time. Please unselect all but one checkbox or insure you have one check box selected!')
                        return false;
                    }
            });
        });
    </script>

    <script>
        setTimeout(function() {
            $('#response').fadeOut('fast');
        }, 10000); // <-- time in milliseconds
    </script>

</head>
<body onLoad="showUrl('All URLs')">

<div class="container">
<div class="panel" id="backgroundPanel">

    <div class="row">
        <div class="large-12 columns">
            <div class="panel">
                <center><h2 style="color: #B8BED4;">MEDIA URL STORAGE APPLICATION</h2></center>
            </div> <!-- END PANEL -->       
        </div> <!-- END COLUMN (12) -->    
    </div> <!-- END ROW -->

    <div class="row">
        <div class="large-12 columns">
       <!-- <div class="panel">  -->      
                <div class="small-4 columns">
                    <a href="#" class="small button radius expand" onClick="showAdd('addUrl');return false;">Add URL</a>
                </div> <!-- END COLUMN (4) -->
                <div class="small-4 columns">
                    <a href="#" class="small button radius expand" id="editUrl" name="editUrl">Edit URL</a>
                </div> <!-- END COLUMN (4) -->      
                <div class="small-4 columns">
                    <a href="#" class="small button radius expand" id="deleteUrl" name="deleteUrl">Delete URL</a>
                </div> <!-- END COLUMN (4) -->            
       <!-- </div>  END PANEL -->   
        </div> <!-- END COLUMN (12) -->    
    </div> <!-- END ROW --> 

    <div class="row">
        <div class=" large-2 columns">
            <div class="panel">
                <ul class="navigation">
                    <a href="#" class="small button radius expand" onClick="showUrl('All URLs');return false;"/>All URLs</a>
                    <a href="#" class="small button radius expand" onClick="showUrl('Television');return false;"/>T.V URLs</a>
                    <a href="#" class="small button radius expand" onClick="showUrl('Movie');return false;"/>Movie URLs</a>
                    <a href="#" class="small button radius expand" onClick="showUrl('Music');return false;"/>Music URLs</a>
                </ul> <!-- END LIST -->
            </div> <!-- END PANEL -->   
        </div> <!-- END COLUMN (2) --> 
        <div class="large-10 columns">
            <div class="panel">
                <div class="row">
                    <div class="large-12 columns" id="response">
                    </div> <!-- END COLUMN (12) --> 
                    <div class="large-12 columns" id="content01">
                    </div> <!-- END COLUMN (12) --> 
                </div> <!-- END ROW --> 
            </div> <!-- END PANEL -->       
        </div> <!-- END COLUMN (10) -->          
    </div> <!-- END ROW --> 

    <center>© Corey Dawber, 2013</center>

</div> <!-- END PANEL -->
</div> <!-- END CONTAINER -->

  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

  <script src="js/foundation.min.js"></script>

  <!--  
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>  
  <script src="js/foundation/foundation.clearing.js"></script>  
  <script src="js/foundation/foundation.cookie.js"></script>  
  <script src="js/foundation/foundation.dropdown.js"></script>  
  <script src="js/foundation/foundation.forms.js"></script>  
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>  
  <script src="js/foundation/foundation.orbit.js"></script>  
  <script src="js/foundation/foundation.reveal.js"></script>  
  <script src="js/foundation/foundation.section.js"></script>  
  <script src="js/foundation/foundation.tooltips.js"></script>  
  <script src="js/foundation/foundation.topbar.js"></script>  
  <script src="js/foundation/foundation.interchange.js"></script>  
  <script src="js/foundation/foundation.placeholder.js"></script>  
  <script src="js/foundation/foundation.abide.js"></script>  
  -->

  <script>
    $(document).foundation();
  </script>
</body>
</html>

It's a completely normal and even well-asked question for SO. you gave us your code, told us what seems to be the problem and what you tried to do. Don't apologize over using the site like you're supposed to - trying, and asking for help after you hit a roadblock — yuvi, Nov 12 '13 at 22:39
Can you show the HTML structure? It looks like you are clearing out `#response` and `#content02` on the clicks. So if the `#editUrl` and `#deleteUrl` buttons are inside those elements, they will no longer work afterwards. — Steve, Nov 12 '13 at 22:41
I just noticed that content02 actually no longer exists, I changed it to response a while back, i guess i didnt proof-read my code well enough. This was probably the cause of the error? EDIT: I changed #content02 to #response as it should be. The error hasn't come back, the code seems to be working as it should. — Corey, Nov 12 '13 at 22:52

score 3 · Accepted Answer · answered Nov 12 '13 at 22:45

Since you are probably deleting and then re-appending the buttons on every click, you also delete the click handlers. You might want to try using delegates:

$("#response").on('click','#deleteUrl', function() {...});

and

$("#content02").on('click','#editUrl', function() {...});

Explanation: This will attach a handler to the element that does not get overwritten (#response and #content02), but only listens to clicks that bubble up from the buttons (#deleteUrl and #editUrl respectively).

the content01 and response divs do not contain any buttons. They are only used to display the dynamic data from ajax. I put the index.HTML code up as requested. — Corey, Nov 12 '13 at 22:57

score 3 · Answer 2 · edited May 23 '17 at 12:22

Hard to tell if we dont have your page structure .

If the #response (i guess its a div) contains the #deleteUrl. Its normal.

You need to register your click event on the body with a

$('body').on('click', 'selector', function (){...}

This way, even if you replace the content of a div with new content, the ajax will always work. Check: jquery click doesn't work on ajax generated content

Ajax function works the first time, second time it doesn't?

2 Answers2

Linked