jquery和Jplist jquery插件多页表格数据

Question

$( '#list' ).on( "click", ".list-item", function( event ) {
    event.preventDefault();
    console.log( "toto" + $(this).text());
    var $this = this;
    $(this).addClass('selected');
$('.list-item').not($this).removeClass('selected');
});

您好，我有一个问题与行div不工作的div呈现在另一个页面时，导航。谢谢你的帮助。

Answer 1

在JPList插件中，当您使用navigate时，只替换div元素的内容，而不替换完整的div。因此，您必须在导航或任何此类事件时对选定的类执行reset操作。

在使用默认选项初始化插件时，请使用'redrawCallback'

即，

redrawCallback: function() {
  $('.list .selected').removeClass('.selected');
}

上面的代码将在div上重置所选的类。

并将您的代码更新为

$( '#list' ).on( "click", ".list-item", function( event ) {
    $('.list .selected').removeClass('selected');
    event.preventDefault();
    console.log( "toto" + $(this).text());
    var $this = this;
    $(this).addClass('selected');
});

尝试这种方法，因为这将首先从元素中删除现有的selected类，并将selected类添加到单击的元素中

Answer 2

我不知道那个特别的插件，但我研究了一下，它似乎把“其他”页面缓存在某个地方，而它们却没有显示出来。在执行脚本时，DOM中不存在这些元素。

每次插件加载页面时，您都必须运行与您的代码类似的代码：

// event "loadNewPage" is not an actual event; you will have to figure out which callbacks/hooks/events your plugin offers
$( '#list' ).on( "loadNewPage", function( event ) {
    $('.list-item').removeClass('selected');
});

只有当您的更改也被缓存时才有效，否则您将不得不在javascript中保存所选元素，并在每次插件显示页面时重新选择它。