ajax 第一次加载页面时起作用

Question

这件事害了我两天
我有这个简单的代码:

<?php if(!isset($_GET['headerload'])){?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://royta.ir/js/all.js" type="text/javascript"></script>
<script src="http://royta.ir/js/main.js'?>"></script>
<div id="content">
<? } ?>

<a class="item ajax"  base="basic" data-title="تنظیمات عمومی" href="http://royta.ir/general/" data-url="/general/" title="تنظیمات عمومی" >asdasd</a>

还有这个jquery

$(function() {
$('a.ajax').click(function(eee){
    eee.preventDefault();
    var location = $(this).attr('href') + '&headerload';
    var base = $(this).attr('base');
    var id = $(this).attr('data-id');
    var titlepage = $(this).attr('data-title');
    var url = $(this).attr('data-url');
    $('#content').html('');
    $('#content').empty();
    //change title


        $.ajax({url:location,success:function(loaddataa){
            document.title = titlepage;
            window.history.pushState(null, titlepage, url);

            $('#content').html(loaddataa);
        }
        });

});

})但是当我运行此页面 http://royta.ir/general如你所见
它仅使用 ajax 运行 1 次，一切正常，但如果您再次单击链接页面将重新加载
有人知道为什么吗？

Answer 1

你会看到...当你运行$('#content').html(loaddataa);时，一个新的<a />已加载到页面上，因此您绑定(bind)到该元素的事件 ( $('a.ajax').click ) 不再存在。

如果您确实希望页面像有效的 HTML 页面一样继续工作，请尝试替换

$('a.ajax').click(function(eee){

与

$('a.ajax').on('click', function(eee){

它绑定(bind)到将来创建的元素。