$(function()失效的问题及jQuery的搜索问题


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简约表格插件</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/demo/jquerytablePlugin201901132312/js/tableXR.js"></script>
    <script src="https://www.jq22.com/demo/jqueryimghover201908121457/jquery.followPopup.min.js"></script>
    <script tpye="text/javascript">
    $(function() {
        $('.imgs').followPopup({
            html: '<img src="" alt="">',
            afterEnter: function($this) {
                console.log($this);
                var url = $this.data('imgurl');
                $('.js-followPopup').children('img').attr('src', url);
            },
            onMove: function($this) {
                // console.log($this);
            },
            beforeOut: function($this) {
                // console.log($this);
            }
        });
    });
    </script>
</head>
<body>
    <div id="root" style="width: 800px"></div>
    <script type="text/javascript">
        $('#root').tableXR({
            //表格标题
            title:'学生成绩列表',
            //表格头部设置
            columns:[
                {data:'name',title:'名字'},
                {data:'touxiang',title:'头像'},
                {data:'age',title:'年龄'},
                {data:'store',title:'得分'},
                {data:'level',title:'等级'},
            ],
            //表格数据：
            data:[
                {name:'小红',touxiang:'<div class="imgs" data-imgurl="https://pic3.zhimg.com/80/v2-e033acbeacba3cd43e4874b1fa34afc8_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'18',store:'98',level:'A'},
                {name:'小化',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-6686ee738ca21e0fa223a462a842b4ca_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'18',store:'97',level:'A'},
                {name:'小杰',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-d8f866ce9142c82ab067cc9ee6931911_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'15',store:'95',level:'A'},
                {name:'小刚',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-e39e88eef5e214216a14fc5ff3d0e31e_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
                {name:'大水',touxiang:'<div class="imgs" data-imgurl="https://pic2.zhimg.com/80/v2-ccfc127b3a68559e192af9ac4db6ed96_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'23',store:'97',level:'A'},
                {name:'小胡',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-732f315e27284d5c4564391036ae1a3a_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'22',store:'88',level:'B'},
                {name:'热热',touxiang:'<div class="imgs" data-imgurl="https://pic3.zhimg.com/80/v2-a522a86bba3c0e3cbc9dcc8a38f5bfac_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'19',store:'90',level:'A'},
                {name:'二娃',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-bb04d65dd48a08e122b0e5cd6803042b_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'92',level:'A'},
                {name:'小瑟',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-9bbddf8c625d251d9a9e608238425d62_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'16',store:'89',level:'B'},
                {name:'滑板',touxiang:'<div class="imgs" data-imgurl="https://pic3.zhimg.com/80/v2-cda2d3096180fd1f4de7f8b99b6cee11_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'15',store:'91',level:'A'},
                {name:'Dddd',touxiang:'<div class="imgs" data-imgurl="https://pic2.zhimg.com/80/v2-2b2889bd0cbd2a552ab7e79fd7a4ba0a_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
                {name:'DSDd',touxiang:'<div class="imgs" data-imgurl="https://pic3.zhimg.com/80/v2-5272433d9f59a6cec2cd7380051c5651_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
                {name:'DSDd',touxiang:'<div class="imgs" data-imgurl="https://pic2.zhimg.com/80/v2-5c5c588f66c5de97d488a693795b4c06_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
                {name:'DSDd',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-45cb7bd2ae4a16036acbebe4f2677560_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
            ]
        })
    </script>
</body>
</html>

其中，这是一段悬停显示图片的代码会失效。

    $(function() {
        $('.imgs').followPopup({
            html: '<img src="" alt="">',
            afterEnter: function($this) {
                console.log($this);
                var url = $this.data('imgurl');
                $('.js-followPopup').children('img').attr('src', url);
            },
            onMove: function($this) {
                // console.log($this);
            },
            beforeOut: function($this) {
                // console.log($this);
            }
        });
    });

页面第一次加载后（该页面只有一个表格），都是正常的，但是：只要执行了对该表格的翻页和搜索之后（用jQuery的filter()对页面表格搜索），搜索结果页面以及翻页后的页面，上面这段代码就会失效。
查了一下资料，好像是说这个 $(function() 方法不是全局函数。
还请帮我修改一下好吗？

另外，用jQuery的filter()进行搜索时，有没有办法搜索两个关键词呢？也就是说，只有同时包含这两个关键词的行，才是满足搜索要求的，且：在搜索框中输入时，这两个关键词不分先后。

实例页面： 简约表格插件 https://www.jq22.com/demo/jquerytablePlugin201901132312/
其中的js地址如下： https://www.jq22.com/demo/jquerytablePlugin201901132312/js/tableXR.js

搜索代码在上述js文件的75～93行（貌似）～

第一 $(function() {}) 这个方法是jQuery页面完成之后使用的方法
如果你想定义全局函数的话 应该写

hanshu function(){
  console.log("定义函数");
}
// 或者 
window.hanshu1 = function(){
  console.log("定义函数");
}

第二
filter() 这个函数 不是jquery 的 而是 es6 的数组 函数 ,用来筛选数据的
比如:

// 筛选出大于2 并且小于 4 的数据
[0,1,2,3,4].filter(aa => aa > 2 && aa < 4)

请采纳

比如 输入 “小 B”或“B 小”时
都可以显示如下结果：

img