【报Bug】上拉刷新switch开关无效

分类：MUI

mui

详细问题描述
[内容]
上拉加载动态添加switch开关，在加载后手动添加了初始化，刚加载的有效，但之前加载的无效
重现步骤
[步骤]
[结果]
[期望]

运行环境
[系统版本]
[浏览器版本]
[IDE版本]
[mui版本]

附件
[代码片段]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">

<ul class="mui-table-view mui-table-view-chevron"></ul>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
auto:true,
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});

    /**  
     * 上拉加载具体业务实现  
     */  
    function pullupRefresh() {  
        setTimeout(function() {  
            var table = document.body.querySelector('.mui-table-view');  
            for (var i=0;i<5;i++) {  
                var html = "";  
                html += '<li class="mui-table-view-cell">';  
                html += '<div class="mui-switch mui-switch-mini mui-active mui-switch-blue">';  
                html += '<div class="mui-switch-handle"></div>';  
                html += '</div>';  
                html += '</li>';  
                table.innerHTML += html;  
            }  
            //动态创建switch开关，需要自己重新初始化  
            mui('.mui-switch').switch();  
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);  
        }, 1500);  
    }  
</script>

</html>
[安装包]

联系方式
[QQ] 635531293
[电话]

switch.rar

2017-06-20 15:24 负责人:无分享

4 个回复

n***@gmail.com

这是我根据官方单webview上拉加载改的，和你的原理一样

testSwitch.zip

5个萝卜 (作者)

问题找到了，非常感谢，我有的是字符拼接创建的控件，改成li = document.createElement('li');这种创建就可以了

2017-06-20 16:51

n***@gmail.com

像楼主这样给大容器直接追加innerHTML 去实现上拉加载会导致绑定事件失效，因为通过innerHTML追加的元素，会重新生成新的dom 虽然看起来一样，但是你可以通过执行以下代码发现：

var domOld = document.querySelectorAll('.mui-switch')[0],  
      domNew;  
//上拉加载之后  
domNew = document.querySelectorAll('.mui-switch')[0];  
console.log(domOld === domNew) // 返回false

Trust - 少说废话

不只mui，很多框架的组件在初始化后，都会添加自定义属性，用做标识。mui的switch组件会添加data-switch作为标识。

element.innerHTML = htmlStr的操作，会重新生成整个dom树。并且element.innerHTML += html，会先读取旧的innerHTML的值。旧的innerHTMl中，是存在data-switch标识的。
这样的话，再次调用初始化switch的方法时，会将带有标识的元素忽略掉，这样也是为了防止重复绑定事件，以及减少对dom的操作。

两种解决办法：

每次更新innerHTMl前，将data-switch相关字符移除。但是，数据多了以后性能较低。
最好的办法，还是每次插入dom节点，即appendChild。这样不会破坏原来的dom树，以前的元素相关的事件监听也不会失效。

n***@gmail.com

我们这边测试在出发上拉加载后手动初始化switch 开关没有复现你说的情况，和你提供的代码原理一样，如果仍有疑问，请上传详细能复现的demo

5个萝卜 (作者)

当前加载的有效，上拉加载后，之前加载的switch开关无效，你是运行我发的代码？

2017-06-20 16:07
5个萝卜 (作者)

你那边测试的demo可以发来看下吗？

2017-06-20 16:13

该问题目前已经被锁定, 无法添加新回复

【报Bug】上拉刷新switch开关无效

4 个回复

公告

相关问题

【报Bug】上拉刷新switch开关无效

与内容相关的链接

4 个回复

公告

相关问题