87,904
社区成员
发帖
与我相关
我的任务
分享jQuery的propertychange事件绑定嵌套不触发问题
以下是测试代码，propertychange绑定事件之后，第一组正确执行，后面的不执行。有谁知道是怎么回事吗？
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function () {
$("#div1 input[Exp='Exp']").each(function () {
var FormulaID = $(this).attr('id');
$(this).attr('formula').replace(/[a-z]\w+/g, function (k) {
var obj = $('#' + k);
obj.bind('input propertychange', function () {
foo(FormulaID);
});
return '';
});
});
});
function foo(AID) {
inp = $('#' + AID).attr('formula');
inp.replace(/[a-z]\w+/g, function (k) {
window[k] = parseFloat(document.getElementById(k).value);
return '';
});
eval('r=' + inp)
document.getElementById(AID).value = r;
}
</script>
</head>
<body>
<div id="div1">
<p>计算公式1：id5=id1+id2*id3</p>
<p>公式2：id6=id5*10 </p>
<p>按理修改id1,id2,id3的任何一个值，id5,id6都会变化，现在是id5能变，但id6不变
<p>如果人工修改id5的值后id6可以正确计算 </p>
<p>初步判断是propertychange事件绑定引起的，有大侠知道原因在哪？ </p>
<input type=text id="id1" value="8" /><br>
<input type=text id="id2" value="2" /><br>
<input type=text id="id3" value="0.5"/><br>
<input type=text id="id4" value="3" /><br>
<input type=text id="id5" exp="Exp" formula="id1+id2*id3"/>
<input type=text id="id6" exp="Exp" formula="id5*10"/>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
Go 旅城通票 2016-04-22
- 打赏
- 举报
oninput如何响应javascript动态设置值
不过建议自己处理触发事件的逻辑，反正都是代码控制的，多加一些判断也不会有什么问题，而不是按照上面的更改系统值，要不可能出现未知道的bug
siaosa 2016-04-22
- 打赏
- 举报
像这样更多的联级触发，有没有更好的解决办法呀？
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function () {
$("#div1 input[Exp='Exp']").each(function () {
var FormulaID = $(this).attr('id');
$(this).attr('formula').replace(/[a-z]\w+/g, function (k) {
var obj = $('#' + k);
obj.bind('input propertychange', function () {
foo(FormulaID);
});
return '';
});
});
});
function foo(AID) {
inp = $('#' + AID).attr('formula');
inp.replace(/[a-z]\w+/g, function (k) {
window[k] = parseFloat(document.getElementById(k).value);
return '';
});
eval('r=' + inp)
document.getElementById(AID).value = r;
}
</script>
</head>
<body>
<div id="div1">
<p>计算公式1：id5=id1+id2*id3</p>
<p>公式2：id6=id5*10 </p>
<p>按理修改id1,id2,id3的任何一个值，id5,id6,id7,id8,id9都会变化，现在是id5的值能变，但id6,id7,id8,id9的值都不能变
<p>如果人工修改id5的值后id6可以正确计算 </p>
<p>初步判断是propertychange事件绑定引起的，有大侠知道原因在哪？ </p>
<input type=text id="id1" value="8" /><br>
<input type=text id="id2" value="2" /><br>
<input type=text id="id3" value="0.5"/><br>
<input type=text id="id4" value="3" /><br>
<input type=text id="id5" exp="Exp" formula="id1+id2*id3"/>
<input type=text id="id6" exp="Exp" formula="id5*10"/>
<input type=text id="id7" exp="Exp" formula="id6+3"/>
<input type=text id="id8" exp="Exp" formula="id7/10"/>
<input type=text id="id9" exp="Exp" formula="id8+5"/>
.......
</div>
</body>
</html>
siaosa 2016-04-22
- 打赏
- 举报
Q80470101: 项目要求做联级触发，在这里只是一个DEMO
showbo： if (AID == 'id5') $('#' + AID).trigger('input'); 这样做是可行，但是有一个问题，如果控件的名字不确定，或者这样子的控件很多，岂不要一个一个的写，是不是这样做灵活性会下降很多呢？ 还有没有更好的办法呀？
家里敷泥呀 2016-04-21
- 打赏
- 举报
id6改成(id1+id2*id3)*10就行了，看来propertychange不支持级联触发。
Go 旅城通票 2016-04-21
- 打赏
- 举报
oninput事件对js设置控件值是不会执行的，这个和onpropertychange不一样，ie8- 的onpropertychange对js设置的值也会相应
判断下是设置id5的值trigger下input事件
function foo(AID) {
inp = $('#' + AID).attr('formula');
console.log(AID)
inp.replace(/[a-z]\w+/g, function (k) {
window[k] = parseFloat(document.getElementById(k).value);
return '';
});
eval('r=' + inp)
document.getElementById(AID).value = r;
if (AID == 'id5') $('#' + AID).trigger('input');///////////////////
}
