[英]Why jquery “change” event does not work in my example?
When a [name="tip"]
has the first value, display a specific element, otherwise it would display another element.当
[name="tip"]
具有第一个值时,显示特定元素,否则将显示另一个元素。
Both elements have the display:none
property.这两个元素都具有
display:none
属性。 When I load the page I check the select value and fadeIn the desired element automatically.当我加载页面时,我会自动检查选择值并淡入所需元素。
Everything works fine except when I try to change the selected option: nothing happens.一切正常,除非我尝试更改所选选项:没有任何反应。 I added both javascript
onchange
to that item and jquery .change()
and nothing happens.我将 javascript
onchange
添加到该项目和 jquery .change()
并且没有任何反应。 Can you tell me why it does not work in my example?你能告诉我为什么它在我的例子中不起作用吗?
<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
});
use .on
for newer jQuery versions (jQuery > 1.7.x reference )将
.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();
});
});
you have a double class attribute on your select.你的选择有一个双类属性。
here is a working sample http://jsfiddle.net/tvhKH/这是一个工作示例http://jsfiddle.net/tvhKH/
May be you should use js error event
to figure out the error in that code.可能您应该使用
js error event
来找出该代码中的错误。 Eg, <script> try {....all your codes here...} catch(err) {alert("THE ERRor" + err.message);} </script>
.例如,
<script> try {....all your codes here...} catch(err) {alert("THE ERRor" + err.message);} </script>
。 These code will alert your error and the exact point it occurs.这些代码将提醒您的错误及其发生的确切点。 Good luck!
祝你好运!
First, you should try to add a首先,您应该尝试添加一个
console.log("It works");
or a或
alert("It works")
in your method so you know if it is actualy called.在您的方法中,以便您知道它是否被实际调用。
Then I think the issue may come from FadeIn() only works on elements with css {display: none} and visibility different of 'hidden', so are you sure your elements are ?然后我认为问题可能来自 FadeIn() 仅适用于具有 css {display: none} 和可见性不同的“隐藏”的元素,所以你确定你的元素是? In doubt, you may replace
有疑问,您可以更换
.fadeIn();
by经过
.css('visibility','visible').hide().fadeIn(); // hide() does the same as display: none
Then please let me know if you have more information after doing that.那么请让我知道您是否在这样做后有更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.