为什么我的 select 的 change 事件会失效？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1519 天前的主题，其中的信息可能已经有所发展或是发生改变。

我用 jquery 触发 select 的 change 事件，在本地单独页面测试是正常的，但是加到一个 discuz 的网站里面就失效了，怎么都无法触发，请问这是怎么回事？是 discuz 的问题还是什么？如何才能正常监听呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>测试表单 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="template/common/common.css" />
<link rel="stylesheet" type="text/css" href="template/form/default/form.css" /><script src="template/form/jquery.min.js" type="text/javascript" charset="gbk"></script>
<script src="static/js/common.js" type="text/javascript" charset="gbk"></script>
<script src="static/js/form.js" type="text/javascript" charset="gbk"></script>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<script type="text/javascript">
var charset = "gbk";
var iniframe =  false ;
</script>
</head>
<body>
<div id="append_parent"></div><div id="ajaxwaitid"></div>
<div class="topnav">
<p class="navinf">
<!--zkgl<span class="pipe">|</span>  -->
<!--<a href="admin.php" target="_blank">管理中心</a><span class="pipe">|</span>
<!--<a href="member.php?mod=logging&amp;action=logout&amp;formhash=295519c2&amp;module=form&amp;tpl=default">退出</a>  -->
</p>
<ul>
<!--<li class="navlogo"><a href="" title=""></a></li>  -->
<!--<li><!--</li> -->
</ul>
</div>
<div id="wp" class="wp">
<div class="mn">
<div class="info wx">
<h1>测试表单</h1>
</div>
<form id="form" enctype="multipart/form-data" onsubmit="return valida_ajaxpost(this);" action="form.php?mod=post" method="post">
<input type="hidden" name="handlekey" value="formresult" />
<input type="hidden" name="id" value="6" />
<input type="hidden" name="formhash" value="295519c2" />
<table cellspacing="0" cellpadding="0" class="tfm"><tr>
<th><span style= "text-align:center" id="fieldtitle_qkks">订阅期数</span></th>
<td>
<span class="ftid">
<select name="fieldvalue[qkks]" id="fieldvalue_qkks" style="width:150px;text-align: center;"  tabindex="1" class="ps"><option  value="1" >1 期</option>
<option  value="2" >2 期</option>
<option  value="3" >3 期</option>
<option  value="4" >4 期</option>
<option  value="5" >5 期</option>
<option  value="6" >6 期</option>
<option  value="7" >7 期</option>
<option  value="8" >8 期</option>
<option  value="9" >9 期</option>
<option  value="10" >10 期</option>
<option  value="11" >11 期</option>
<option  value="12" >12 期</option>
</select>
</span>
 <span id="checkresult_qkks"></span>
</td>
</tr>
<tr>
<th><span style= "text-align:center" id="fieldtitle_dysl">份　　数</span></th>
<td>
<input type="text" name="fieldvalue[dysl]" id="fieldvalue_dysl" class="px" tabindex="1"  style="width:150px" onBlur="checkfield('dysl', '0', 'number', '0', '0')" value=""  />
 <span id="checkresult_dysl"></span>
<div class="d">
20 元 /份</div>
</td>
</tr>
<tr>
<th><span style= "text-align:center" id="fieldtitle_dyje">金　　额</span></th>
<td>
<input type="text" name="fieldvalue[dyje]" id="fieldvalue_dyje" class="px" tabindex="1"  style="width:150px" onBlur="checkfield('dyje', '0', 'number', '0', '0')" value=""  />
 <span id="checkresult_dyje"></span>
</td>
</tr>

<input name="sechash" type="hidden" value="S1vm8" />

<tr>
<td></td>
<td>
<button type="submit" id="formsubmit" class="pn pnc" value="true" name="formsubmit"><span>提 交</span></button>
</td>
</tr>
</table>
<script type="text/javascript">
		jQuery("#fieldvalue_qkks").change(function () {
			var a = jQuery('#fieldvalue_dysl').val();	
			var b = 20;
			var c = jQuery(this).children('option:selected').val();
			var sum= a * b * c;		
			jQuery('#fieldvalue_dyje').val(sum);  
		}); 
}) 

</script></form>
<div id="return_formresult" sytle="display:none;">&nbsp;</div><div class="cl" id="ft">
</div>
</div>
</div></body>
</html>

9 条回复 • 2020-02-20 11:39:05 +08:00

littleylv

2020-02-20 10:10:00 +08:00

dom 加载结束再绑事件

le720

2020-02-20 10:17:23 +08:00

看一下控制台，语法错了，倒数第七行，多了。

CR7sun

2020-02-20 10:19:19 +08:00

@littleylv 我这个已经是 dom 加载结束后再绑事件了，discuz 里面 jquery 的$()要改为 jQuery()

CR7sun

2020-02-20 10:21:00 +08:00

@le720 不好意思漏了一个 jQuery(function(){ 实际上我写了还是没有触发

le720

2020-02-20 10:25:18 +08:00

@CR7sun 有没有具体的报错信息呢，我刚才试了，checkfield 这个 blur 事件也没定义

CR7sun

2020-02-20 10:30:27 +08:00

@le720 实际上并没有报错 ```jQuery('#fieldvalue_dysl').bind('input propertychange', function() {
var options = jQuery("#fieldvalue_qkks option:selected");
var fieldvalue_qkks = options.val();
var a = jQuery('#fieldvalue_dysl').val();
var b = 20;
var c = fieldvalue_qkks;
var sum= a * b * c;
jQuery('#fieldvalue_dyje').val(sum);
jQuery('#fieldvalue_dyje').trigger("click");
});``` 这个监听输入框的是可以的，监听 select 的就不行

le720

2020-02-20 10:33:03 +08:00

@CR7sun alert 大法，一行行试试吧。另外，这都 2020 了，能稍微规范一下前端的内容嘛

no1xsyzy

2020-02-20 11:31:33 +08:00

直接发 Demo 多好，前端有那么多 Demo 站

duan602728596

2020-02-20 11:39:05 +08:00

请用这个，http://jsbin.com/?html,js,output