Question

我有一个等待用户点击文本输入的功能，然后等待用户按向下和向上箭头键。当用户按下向下和向上箭头键时，调用函数hoverDown（），它基本上以编程方式悬停在表行上。按下enter键时，将调用window.location并加载相应的页面。问题是我在整个应用程序中使用pjax来动态加载内容并在没有页面刷新的情况下推送新的URL。当我调用window.location函数时，pjax不再起作用，而是加载了正确的url并且发生了整页刷新 - 这是我想要避免的事情。有没有办法以编程方式从我的函数中调用和执行pjax？相关代码：

// HTML

<div id="main">
<input type="text" class="table-search" id="search" autocomplete="off"   placeholder="Search Clients..." /><table class="table" id="tblData">
<thead><tr><th>Name</th> <th>Title</th></tr></thead>
<tbody id="tblDataBody">
<tr><td><a href="http://lar.loc/cases">Scott</a></td> <td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Billy</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">George</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Sara</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">John</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Megan</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Ben</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jully</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Bethany</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Alen</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jane</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Alice</a></td><td>Client</td></tr></tbody></table>
</div>

//使用Javascript

$(document).ready(function(){
    $("#main").on("keydown", "#search", hoverDown);
});

function hoverDown(e) {
    var $tbl = $('#tblDataBody');
    var $cur = $('.active', $tbl).removeClass('active').first();

    if (e.keyCode === 40) { //down
        if ($cur.length) {
            $cur.next().addClass('active');
        } else {
            $tbl.children().first().addClass('active');
        }
    } else if (e.keyCode == 38) { //up
        if ($cur.length) {
            $cur.prev().addClass('active');
        } else {
            $tbl.children().last().addClass('active');
        }
    } else if (e.keyCode == 13) {
        if ($cur.length) {
            window.location = $cur.find("a").attr("href");
        }
    }
}

//为了完整起见，CSS：

.active {
    background-color: yellow;
}

如果您希望查看此代码以便更好地理解，可以查看this jsFiddle.

同样，我正在尝试使用pjax来加载内容。

Answer 1

我不知道第一次在文档中我是如何错过这个的，但是我找到了一种手动调用pjax的简单方法。

} else if (e.keyCode == 13) { 
        if ($cur.length) {
            // manually invoke pjax after enter has been pressed
            var $url = $cur.find("a").attr("href");
            $.pjax({url: $url, container: '#main'});
        }
}

Answer 2

在阅读了您关联的代码后，我相信您应该使用$.pjax.click功能，而不是将您的网址分配给window.location：

var container = $(this).closest('[data-pjax-container]')
$.pjax.click(event, {container: container})

Answer 3

看看Djax：Dynamic Pjax

https://github.com/beezee/djax

有没有办法以编程方式从我的javascript文件中调用和执行pjax？

3 个答案: