0

所以......我正要问这个问题“我的 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>

ps 我知道这可能不是关于堆栈溢出的正常问题。但是我完全不知道发生了什么来阻止这个错误的发生......我仍然不明白是什么导致了这个错误。浏览器控制台很干净，没有给出错误，没有语法错误......如果有人对此问题有任何意见，请告诉我。

编辑：

索引.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>
4

2 回答 2

3

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

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

和

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

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

于 2013-11-12T22:45:38.157 回答
3

很难判断我们是否没有您的页面结构。

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

您需要在正文上注册您的点击事件

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

这样，即使您将 div 的内容替换为新内容，ajax 也将始终有效。检查：jquery click 不适用于 ajax 生成的内容

于 2013-11-12T22:47:39.333 回答