PHP动态链接列表打破了ajax

Question

我有这个从数组生成的事物列表，其中数组值映射到数组键，数组键映射到数据库中的查询。现在我面临的问题是，当这个列表包含在我的 ajax 部分中时，它只能在页面刷新之前单击一次。什么给了？

我正在使用 HTML5 History API 方法在点击链接的 href="" 部分时更改 url。 我对 jQuery 有点陌生，这很奇怪，因为我主要是前端开发人员，但我从来没有时间赶上，但是我的链接列表破坏了这段代码对我来说没有意义。

$("a[rel='ajax']").click(function(e){
    //e.preventDefault();

    pageurl = $(this).attr('href');

    $.ajax({url:pageurl+'?rel=ajax',success: function(data){
        $('#ajax')
        .load(pageurl + ' #resultati');
    }});


    if(pageurl!=window.location){
        window.history.pushState({path:pageurl},'',pageurl);
    }
    return false;
});

链接是在 PHP 中使用这个函数生成的，如果有什么不同的话，我使用的是 laravel 框架。

public static function filterlink ($filter, $what)
{
    if (URI::segment(2) == 'make')
    {
        $first = URI::segment(3);
        $next = URI::segment(4);
    }
    else
    {
        $first = URI::segment(2);
        $next = URI::segment(3);
    }

    // what == 0 is the filter, what == 1 is the +filter. This reffers to the link being created.
    switch (substr($first, 0, 1))
    {
        case ' ': // example.ex/make/[+]current starts with a plus sign.
            if($what == 0)
                //new no+ filter.
            {
                return HTML::link('make/'.self::slug($filter.'/'.$first), $filter, array('rel' => 'ajax')); 
                // example.ex/make/+current => example.ex/make/newfilter/+current 
            } 
            elseif($what == 1) 
                //new +filter
            {
                return HTML::link('make/+'.self::slug($filter), $filter, array('rel' => 'ajax')); 
                // example.ex/make/+current+replaced+by+newfilter
            }
        break;


        default: 
            if($what == 0) 
            // new no+ filter.
            {
                if(!empty($next))
                {
                    return HTML::link('make/'.self::slug($filter.'/'.$next), $filter, array('rel' => 'ajax'));
                }
                else
                {
                    return HTML::link('make/'.self::slug($filter), $filter, array('rel' => 'ajax'));
                }
            }
            elseif($what == 1 && (!empty($first)))
            {
                return HTML::link('make/'.self::slug($first.'/+'.$filter), $filter, array('rel' => 'ajax'));
            }
            elseif($what == 1 && (empty($first)))
            {
                return HTML::link('make/+'.self::slug($filter), $filter, array('rel' => 'ajax'));
            }

        }
    }

我已经尝试将我的链接列表放在 ajax 字段之外，这样可以保持 ajax 流程继续进行而不会刷新任何无聊的页面，但是我的链接 url 显然不会更新，而且我只能构建单端链接，破坏页面双重过滤功能。

任何帮助都会很棒。

Answer 1

如果您实际加载的 HTML 内容包含您希望 AJAX 友好的链接，那么您需要使用 .on 以便新链接也被您的 jQuery 函数接管。

$(document).on('click',"a[rel='ajax']",function(e) {

这里的工作示例：

http://jsfiddle.net/hansvedo/cJW54/

---

想一想，将 preventDefault 放在 pushState 函数的位置怎么样？或者甚至只是取消注释它在哪里？ preventDefault 阻止正常的链接动作发生。

if(pageurl!=window.location){
    e.preventDefault();
    window.history.pushState({path:pageurl},'',pageurl);
}