详细问题描述
动态添加内容与删除内容时会出现删除一项会将所有添加项全部删除,为了确定不是mui.js出现的问题,将代码中所有的mui.js,mui.css相关内容全部删除,变为纯粹的html测试,电脑chorm中运行正常,在手机中运行仍然有如上现象
重现步骤
[步骤]
1、增加自定义项
2、增加自定义项
3、增加自定义项
4、删除第二项
[结果]
所有添加的自定义项目全部删除
[期望]
点击哪项,哪项删除
运行环境
[系统版本]
Windows10 企业版 x64
[浏览器版本]
Google chorm 版本 54.0.2840.99 m (64-bit)
[IDE版本]
HBuilder
7.5.1.201610112114
[mui版本]
无
附件
[代码片段]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header>
<a></a>
<h1>密码增加</h1>
<a></a>
</header>
<div>
<form id='login-form'>
<div>
<label>使用位置</label>
<input id='inputShiYongWeiZhi' type="text" placeholder="请输入使用位置">
</div>
<div>
<label>用户名</label>
<input id='inputYongHuMing' type="text" placeholder="请输入账号">
</div>
<div>
<label>密码</label>
<input id='inputMiMa' type="text" placeholder="请输入密码">
</div>
<div id="addRongQi">
</div>
<button id="btnAdd" type="button">增加自定义选项</button>
</form>
</div>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
var addRongQi = document.getElementById("addRongQi");
var id = 1;
document.getElementById('btnAdd').addEventListener('tap', function() {
var zongDiv = document.createElement("div");
zongDiv.id = "custom" + id;
//添加自定义容器
var newDiv = document.createElement("div");
newDiv.id = "customname" + id;
//添加自定义项名称
var newLabel = document.createElement("label");
newLabel.innerText = "自定义项";
newLabel.style.width = "40%";
newLabel.id = "customnameinput" + id;
//添加自定义项输入框
var newInput = document.createElement("input");
newInput.type = "text";
newInput.placeholder = "请输入自定义项名称";
newInput.style.width = "60%";
//将两项添加到容器
newDiv.appendChild(newLabel);
newDiv.appendChild(newInput);
//显示到界面
zongDiv.appendChild(newDiv);
//添加按钮
var newBtn = document.createElement("button");
newBtn.type = "button";
newBtn.innerText = "删除";
newBtn.classList.add("Btn");
newBtn.style.marginRight = "10px";
newBtn.id = "custombtn" + id;
//显示到界面
zongDiv.appendChild(newBtn);
//添加自定义值容器
newDiv = document.createElement("div");
newDiv.id = "customvalue" + id;
//添加自定义值名称
newLabel = document.createElement("label");
newLabel.innerText = "自定义值";
newLabel.style.width = "40%";
//添加自定义值内容
newInput = document.createElement("input");
newInput.type = "text";
newInput.placeholder = "请输入自定义值内容";
newInput.style.width = "60%";
//添加到容器
newDiv.appendChild(newLabel);
newDiv.appendChild(newInput);
//显示到界面
zongDiv.appendChild(newDiv);
addRongQi.appendChild(zongDiv);
id++;
})
//jquery代码
// $('#addRongQi').on('click', '.Btn', function() {
// var thid = this.id.toString();
// thid = thid.replace(/[^0-9]+/g,'');
// $("#custom"+thid).remove();
// console.log(thid);
// console.log(this.id);
// });
//mui代码
mui('#addRongQi').on('tap', '.Btn', function() {
var thid = this.id.toString();
thid = thid.replace(/[^0-9]+/g,'');
$("#custom"+thid).remove();
console.log(thid);
console.log(this.id);
});
</script>
</body>
</html>
[安装包]
未生成
联系方式
[QQ]
193957774
[电话]
15548666654
4 个回复
aefj (作者)
升级了hbuilder好了!!也是醉了
aefj (作者)
一天了都没人回答吗?
周羊羊
测了,手机电脑都没问题啊……
2016-12-02 16:11
badfl - mui详细文档:http://ask.dcloud.net.cn/article/1039
我用手机与浏览器测试均没发现你说的问题
JQ版本可能不相同
//cdn.bootcss.com/jquery/3.1.1/jquery.min.js
心想事成
也想听听答案