Question

所以......我正要问这个问题“我的ajax功能（编辑和删除）是如何在我第一次使用时工作的，但如果我再次运行任何一个没有整页刷新（无论我先使用哪种功能，或者我使用哪种功能），第二次不起作用？“

通过“不工作”我的意思是，对于编辑功能，它第二次尝试像往常一样加载editUrlForm.php文件，然后只是停止并留下一个空div，或者在删除的情况下，它从我的“else”语句中给出错误消息，然后留下一个空div，在页面重新加载时没有删除任何内容。

这个问题因为没有原因而突然停止发生!!!

问题：为什么？怎么样？我不明白......

AJAX功能：

   <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。我理解这可能不是堆栈溢流的正常问题。但我绝对难以理解为什么碰巧发生这种错误...我还是不明白是什么原因导致了错误。浏览器控制台很干净，没有错误，没有语法错误...如果有人对此问题有任何意见，可能会对此有所了解请告诉我。

编辑：

的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>

Answer 1

由于您可能在每次点击时删除然后重新附加按钮，因此您也会删除点击处理程序。您可能想尝试使用委托：

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

和

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

说明：这会将处理程序附加到不会被覆盖的元素（#response和#content02），但只会侦听从按钮（#deleteUrl和分别为#editUrl。

Answer 2

很难说我们是否没有你的页面结构。

如果#response（我猜它是一个div）包含#deleteUrl。正常。

您需要使用

在身体上注册点击事件

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

这样，即使用新内容替换div的内容，ajax也会一直有效。检查：jquery click doesn't work on ajax generated content

Ajax函数第一次工作，第二次不工作？

2 个答案: