1

这件事让我死了两天
我有这个简单的代码： 

<?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 次，一切都很好，但是如果你再次点击链接页面会重新加载
有人知道为什么吗？

4

2 回答 2

5

你看......当你运行时$('#content').html(loaddataa);，一个新<a />的被加载到页面上，所以$('a.ajax').click你绑定到元素的事件（）不再存在。

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

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

和

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

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

于 2013-07-26T00:12:21.350 回答
3

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

$("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/

于 2013-07-26T00:29:25.213 回答