非常奇怪的JS/jQuery行为-alert()包含/排除
Very strange JS / jQuery behavior - alert() inclusion/exclusion
我有下表。在这个表中,我动态添加了以下形式的行:
<tr class="conditionalRow">
<td class="logicalData">
<select oldvalue="AND" class="logicSelectionMenu">
<option value="AND">AND</option>
<option value="AND (">AND (</option>
<option value="OR">OR </option>
<option value="OR (">OR (</option>
<option value=")">)</option>
</select>
</td>
<td class="fieldData">
<p>Other Data that you don't need to worry about</p>
</td>
<td class="conditionData">
<p>Other Data that you don't need to worry about</p>
</td>
<td class="compareData">
<p>Other Data that you don't need to worry about</p>
</td>
<td>
<button class="removeConditionButton" type="button"> - </button>
</td>
</tr>
我使用以下jQuery选择器来处理onchange事件:
$(document).ready(function() {
$(".logicSelectionMenu").change(function() {
var row = $(this).closest("tr");
updateLogicMenu(row);
});
$(".logicSelectionMenu").focus(function() {
$(this).attr("oldValue",$(this).val());
});
});
function updateLogicMenu(inRow) {
var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");
var oldVal = $(inRow).find(".logicSelectionMenu").attr("oldValue");
/* -=> VERY IMPORTANT LINE BELOW!!! <=- */
// alert("Hi, I cause a time delay");
if (selectedVal == ")") {
// clears cell contents if ")" is choosen by user
$(inRow).find(".fieldSelectionMenu" ).css("visibility","hidden").html("");
$(inRow).find(".conditionSelectionMenu").css("visibility","hidden").html("");
$(inRow).find(".compareData" ).css("visibility","hidden").html("");
}
else if(oldVal == ")" || oldVal === undefined) {
// regenerates cell contents when user changes selection from ")" to another
alert("regenerating");
$(inRow).find(".fieldSelectionMenu").css("visibility","visible").html(getFieldSelectionOptions());
$(inRow).find(".conditionSelectionMenu").css("visibility","visible");
$(inRow).find(".compareSelectionMenu").css("visibility","visible");
updateFieldMenu(inRow); // function regenerates the next cell contents
// and calls another function
// which regenerates the next cell contents,
// and chains on and on ... etc
}
else { ; } // no action is needed,no clearing or regeneration
}
问题是,当我从下拉菜单中选择")"选项,然后选择另一个选项时。页面现在的行为与预期一致。
当非常重要的一行不是被注释掉时,两个警告框都会弹出,分别显示"我导致时间延迟"answers"再生",随后细胞的内容物会按预期再生。
当非常重要的一行IS被注释掉时,JavaScript不会进入else子句,并且不会重新生成以下单元格的内容。
是什么原因导致此警报框导致页面按预期运行,但它的缺失会导致页面意外运行?是用户单击"确定"按钮的时间延迟吗?我不希望在生产页面上出现此警报框,那么我如何使页面在有或没有警报框的情况下表现相同?
var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");
.logicSelectionMenu
没有属性value
。
改为使用.val()
:
var selectedVal = $(inRow).find(".logicSelectionMenu").val();
此外,附带说明的是,您有一个名为oldvalue
的属性,从而使HTML无效,您应该使用data-*
属性,并将其设置为:data-oldvalue="oldvalue"
。
按照您现在的操作方式,当您设置oldvalue="val"
-时,您正在访问attr("oldValue")
。注意这种情况。
oldVal
从来都不是undefined
,因为您已经在标记中设置了它,所以if
语句的||
部分是多余的。
感谢ahren的观察,我找到了代码的修复程序。
ahren的 观察结果:
"焦点事件在选择更改后再次触发,因此oldVal被更新。具有alert()将删除此焦点并防止其再次触发"
修复:
$(document).ready(function() {
$(".logicSelectionMenu").change(function() {
var row = $(this).closest("tr");
updateLogicMenu(row);
});
/* DON'T USE onfocus event
to set the oldValue
$(".logicSelectionMenu").focus(function() {
$(this).attr("oldValue",$(this).val());
});
*/
});
function updateLogicMenu(inRow) {
var selectedVal = $(inRow).find(".logicSelectionMenu").attr("value");
var oldVal = $(inRow).find(".logicSelectionMenu").attr("data-oldValue");
/* -=> VERY IMPORTANT LINE BELOW!!! <=- */
// alert("Hi, I cause a time delay");
if (selectedVal == ")") {
// clears cell contents if ")" is choosen by user
$(inRow).find(".fieldSelectionMenu" ).css("visibility","hidden").html("");
$(inRow).find(".conditionSelectionMenu").css("visibility","hidden").html("");
$(inRow).find(".compareData" ).css("visibility","hidden").html("");
}
else if(oldVal == ")" || oldVal === undefined) {
// regenerates cell contents when user changes selection from ")" to another
alert("regenerating");
$(inRow).find(".fieldSelectionMenu" ).css("visibility","visible").html(getFieldSelectionOptions());
$(inRow).find(".conditionSelectionMenu").css("visibility","visible");
$(inRow).find(".compareSelectionMenu" ).css("visibility","visible");
updateFieldMenu(inRow); // function regenerates the next cell contents
// and calls another function
// which regenerates the next cell contents,
// and chains on and on ... etc
}
else { ; } // no action is needed,no clearing or regeneration
/* SET THE VALUE HERE: */
$(inRow).find(".logicSelectionMenu").attr("data-oldValue",selectedVal);
}
在函数末尾设置oldValue
的值,并让oldVal === undefined
捕获通过函数的第一次传递。
- Sencha Touch构建-排除文件
- 如何为排除无穷大和NaN的数字声明Flow类型
- JS条件故障排除
- 如何在Webpack中从导出中排除供应商模块peerDependencies
- 是否排除节点中错误堆栈的第一行?/节点中的自定义错误类型
- alert和ajax之间的罕见错误
- 如何排除此正则表达式中的空白匹配项
- 使用Regex排除标签中的尾随点
- AJAX请求不起作用,除非使用alert()
- 如何排除对象'在$.toJSON之前或期间的s id属性
- Django无法通过urls.py配置找到djangular/app.js文件.如何进行故障排除
- 如何使用yyyymmdd格式在日期中添加n天,但排除周日
- 只有当alert()在带有AJAX的internet explorer中使用时,Javascript才会更新UI
- Sails.js指定要从自动插入中排除的js文件
- 如何从应用于正文的css中排除特定的表单
- 对DataTable jquery进行排序,排除文本字段中的空白
- 正在获取排除特定子节点的节点的innerHTML
- 从嵌套对象属性中获取排除某个值的最高值
- 非常奇怪的JS/jQuery行为-alert()包含/排除
- 如果用户在收到提示后将任何信息留空,我如何从 Javascript 的输出 (window.alert) 中排除该数据