0

だから...私はこの質問をしようとしていました「なぜ私のajax関数（編集と削除）は初めて使用したときに機能するのですか？しかし、ページ全体をリフレッシュせずにいずれかをもう一度実行すると（どの機能に関係なく）最初に使用する機能、または 2 番目に使用する機能)、2 回目は機能しませんか?".

「機能しない」とは、編集機能の場合、通常どおり editUrlForm.php ファイルを 2 回目にロードしようとすると、停止して空の 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これはおそらく、スタックオーバーフローに関する通常の質問ではないことを理解しています。しかし、このエラーの発生を止めるために何が起こったのか、私は絶対に困惑しています...そもそも何がエラーの原因だったのかまだわかりません。ブラウザ コンソールはきれいで、エラーも構文エラーもありませんでした。

編集：

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>
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 は常に機能します。チェック: ajax で生成されたコンテンツで jquery クリックが機能しない

于 2013-11-12T22:47:39.333 に答える