使用 jquery 过滤器插件时的 Dom 问题

Question

我正在使用https://github.com/chromawoods/instaFilta 过滤表格

该表格使用 ajax 进行动态行插入，并且每个行单元格都可以使用 edit in place 进行更新：

https://github.com/itinken/jinplace

现在，当我添加一个新行，然后将例如“标题”编辑为“Linux”然后尝试过滤时，它将显示具有“Linux”的行，如果我再次将“Linux”更改为“Unix”再次尝试过滤而不从服务器重新加载页面 - “Unix”一词将更改为旧数据 - 在这里，“Linux”和过滤器将不起作用，当我重新加载页面时，标题正确显示为“Unix”。

所以当我尝试过滤时，dom 会从陈旧的数据中更新。

代码：

//就地编辑

$(document).on('click', 'span.editable', function(event) {
    $('.editable').jinplace({
        url: '/onit/web/data-updater.php',
        textOnly: false,
        placeholder: '',
        okButton: '',
        cancelButton: ''
    })
    .on('jinplace:done', function(event, data) {
       console.log('Successful! New value is', data);
    });
});

这是

的代码

// 过滤器

$(document).on('click', '#filter-me', function(event) {
    //event.preventDefault();
    $('#filter-me').instaFilta({
        //scope: '.content-wrapper',
        //targets: '.instafilta-target',
        caseSensitive: false,
        markMatches: true,
        beginsWith: false,
        matchCssClass: 'instafilta-match',
        itemsHideEffect: 'slideUp',
        itemsHideDuration:300
    });
});

如何在使用就地编辑更新行时更新过滤器，或者如何告诉 instaFilta 获取最新的 dom？

Answer 1

你可以试试这个

$(document).ajaxComplete(function() {
    $("#filter-me").instaFilta({
        scope: "#ex1" 
    });
});

在ajax结束后初始化过滤