[英]Why jquery “change” event does not work in my example?
当[name="tip"]
具有第一个值时,显示特定元素,否则将显示另一个元素。
这两个元素都具有display:none
属性。 当我加载页面时,我会自动检查选择值并淡入所需元素。
一切正常,除非我尝试更改所选选项:没有任何反应。 我将 javascript onchange
添加到该项目和 jquery .change()
并且没有任何反应。 你能告诉我为什么它在我的例子中不起作用吗?
<form id="fm-account-properties-tab" method="POST">
<table width="300px" style="margin-top:10px;" align="center" >
<tr>
<td align="left">
<select class="easyui-combobox" name="tip" style="width:200px;" class="easyui-validatebox" required="true" onchange="changeType();">
<option value="l1">l1</option>
<option value="l2">l2</option>
<script>
$(document).ready(function(){
$('[name="tip"]').val('<?php echo $a['tip'];?>');
});
</script>
</select>
</td>
</tr>
<tr id="l1" style="display:none">
<td align="left">
<select class="easyui-combobox" name="l1" style="width:200px;" class="easyui-validatebox" required="true">
</select>
</td>
</tr>
<tr id="l2" style="display:none">
<td align="left">
<select class="easyui-combobox" name="l2" style="width:200px;" class="easyui-validatebox">
</select>
</td>
</tr>
</table>
</form>
<script>
function changeType()
{
if($('[name="tip"]').val()=='l1')
{
$('#l1').fadeIn();
$('#l2').hide();
}
else
{
$('#l2').fadeIn();
$('#l1').hide();
}
}
$(document).ready( function () {
changeType();
$('[name="tip"]').change(function(){ alert('1');});//it never alerts me
});
将.on
用于较新的 jQuery 版本(jQuery > 1.7.x参考)
function changeType() {
if ($('[name="tip"]').val() == '___') {
$('#1').fadeIn();
$('#2').hide();
} else {
$('#2').fadeIn();
$('#1').hide();
}
}
$(document).ready(function () {
changeType();
$('select[name="tip"]').on('change', function() {
changeType();
});
});
你的选择有一个双类属性。
这是一个工作示例http://jsfiddle.net/tvhKH/
可能您应该使用js error event
来找出该代码中的错误。 例如, <script> try {....all your codes here...} catch(err) {alert("THE ERRor" + err.message);} </script>
。 这些代码将提醒您的错误及其发生的确切点。 祝你好运!
首先,您应该尝试添加一个
console.log("It works");
或
alert("It works")
在您的方法中,以便您知道它是否被实际调用。
然后我认为问题可能来自 FadeIn() 仅适用于具有 css {display: none} 和可见性不同的“隐藏”的元素,所以你确定你的元素是? 有疑问,您可以更换
.fadeIn();
经过
.css('visibility','visible').hide().fadeIn(); // hide() does the same as display: none
那么请让我知道您是否在这样做后有更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.