为什么ajax成功调用后jquery中断？ [重复]

Question

这个问题已经在这里有了答案：

• 如何使用jQuery将事件附加到动态HTML元素？ [重复] 8个答案

我正在创建一个非常简单的脚本，获取文件的目录列表并将其放入数组，然后对其进行迭代并吐出html。 它还可以处理完整的分页。

但是，当我进行ajax调用以从分页加载一组新数据时，它会加载，然后jquery似乎关闭了。

我猜我在替换整个#content包装器时需要一些回调或重绘功能。

在ajax调用之后，如何使我的javascript重置？

这是主要的php脚本，创建数组和分页：

<?php


$per_page=12;



$dir    = 'c:\\inetpub\\wwwroot\\'; //directory of gifs
$files1 = array_slice(scandir($dir), 2);  // remove . and .. from array
$array = array_chunk($files1, $per_page); // break the array into 12 images per page 
$count = ceil(count($files1) / $per_page); // count amount of pages

$pages = array_filter(array_merge(array(0), $array)); // push array +1 so pagination navigation matches correctly from 1

$pgkey = empty($_GET['showpage']) ? 1 : (int)$_GET['showpage'];

$pages[$pgkey];

// echo "<pre>";
// print_r($pages);
// echo "</pre>";

    foreach($pages[$pgkey] as $file)
    {
        echo '<div class="col-lg-3 col-md-2 col-sm-3 col-xs-4 thumb"> <a class="thumbnail" href="#">'."\n\r";  
        echo '<img class="freezeframe img-responsive" src="../gifs/images/'. $file . '" alt="">'."\n\r";
        echo '</a></div>'."\n\r";
    }

// Prev cannot be less than one
$prev = max(1, $pgkey - 1);
// Next cannot be larger than $pages_count
$next = min($count , $pgkey + 1); 
$is_first = $pgkey == 1;
$is_last  = $pgkey == $count;


    echo '<ul id="nav" class="pagination pagination-sm">';
    echo !$is_first ? '<li><a data-id="'. $prev .'"  href="#">Previous</a></li>' : '';

    for($i=1; $i < count($pages)+1; $i++)
    {
        echo '<li><a data-id="'. $i .'" href="#">'.  $i .'</a></li>';
    }

        //echo "we are at:"; echo $pgkey;
        echo !$is_last ? '<li><a data-id="'. $next .'" href="#">Next</a></li>' : '';


    echo '</ul>';
?>

这是我的html / javascript

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Thumbnail Gallery - Start Bootstrap Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/thumbnail-gallery.css" rel="stylesheet">
    <link href="css/overrides.css" rel="stylesheet">

    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/freezeframe.min.js"></script>

    <script>


             $("document").ready(function(){
            $('#nav li a').click(function(){

            var page_id = $(this).data('id');
            $.ajax
            ({ 
                url: 'gifs.php',
                data: {"showpage": page_id},
                type: 'get',
                 async:false,
                    success: function(result)
                    {

                        $('#content').html(result).fadeIn(700, function() 
                        {
                        });
                    }
                });
            });
      });
    </script>
</head>

<body>

    <!-- Page Content -->
    <div class="container">

        <div id="content" class="row">


    <?php include "files.php"; ?>


        </div>

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Jared 2015</p>
                </div>
            </div>
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->





</body>

</html>

Answer 1

您需要委派导航链接的click事件，否则新添加到DOM的元素将不会绑定该事件：

$("#content").on('click', '#nav li a', function() { });

Answer 2

由于您替换了分页链接，因此必须将click事件重新绑定到分页的锚标记。