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 />，因此绑定到该元素的事件（$('a.ajax').click）不存在了。

如果您真的希望您的网页继续工作，就像它是一个有效的HTML网页，请尝试替换

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

与

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

与未来创建的元素绑定。

Answer 2

在将内容添加到页面之前，会分配您的点击处理程序。您需要使用委托。

$("body").on("click", "a.ajax", function(e) {
    ...
});

理想情况下，您应将body替换为父选择器尽可能接近a.ajax。但body肯定能奏效。

<div id="foo">
    <!-- a.ajax inserted here -->
</div>

$("#foo").on("click", "a.ajax", function(e) {
    ...
});

这是jsFiddle http://jsfiddle.net/8jqX9/

http://api.jquery.com/delegate/

ajax刚刚第一次用于页面加载

2 个答案: