作者qazsd (知足常乐)
看板Web_Design
标题[问题] 下拉式选单改变选项後触发jQuery
时间Sat Oct 31 23:47:27 2015
请问一下板上各位高手
小弟有个表格
表格每列都有回圈产生的下拉式选单，想要使用者改变选单选项时，会触发JavaScript
部分程式如下：
..
..
//i是每列都会+1的变数
row = $('<td></td>').html('
<select id="product'+
i+'" class="big">
<option value="0">---</option>
<option value="1">收音机</option>
<option value="2">电风扇</option>
</select>');
..
..
$('
#mainTable').append(row);
而对应的JavaScript无论使用
$(function() {$('select').on("change",function() {alert('Hi');});
或是
$(function() {$("#product"+i).on("change",function() {alert('Hi');});
或是
$(function() {$('.big').on("change",function() {alert('Hi');});
都没产生反应
但若单纯用html刻出
<select class="big" id="product">
<option>收音机</option>
<option>电风扇</option>
</select>
则在改变该选单的选项时，则可以弹出显示"Hi"的讯息，
想请问用程式产生的下拉式选单那边是出了什麽问题，何以没有触发到JavaScript？
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 123.195.39.72
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1446306450.A.889.html
※ 编辑: qazsd (123.195.39.72), 10/31/2015 23:48:27
1F：推 frank910138: 那换个写法，应该可行 11/01 00:06
2F：→ frank910138: $(document).on('Change', '.big', function(){ 11/01 00:06
3F：→ frank910138: //do something 11/01 00:06
4F：→ frank910138: }); 11/01 00:06
5F：推 tsao1211: 你select 要先产生完 再 on change 11/01 00:27
6F：→ qazsd: 上面都是写在Ajax的success区块内，有先写select的程式码 11/01 00:29
7F：→ qazsd: 在写JS change的程式码 11/01 00:30
8F：→ qazsd: 回frank大大，刚试过好像没生效 11/01 00:32
9F：→ qazsd: 若不使用jQuery的写法，使用传统的做法(select id="product 11/01 00:38
10F：→ qazsd: " class="big" onChange="update()"), 再加上function upda 11/01 00:39
11F：→ qazsd: te(){//do something}则可生效，但不知为何jQuery得方法行 11/01 00:39
12F：→ qazsd: 不通？ 11/01 00:40
13F：→ qazsd: 但是使用传统的做法时,JavaScript里面写var value = $(this 11/01 00:52
14F：→ qazsd: ).val()则会出错 11/01 00:53
15F：推 ckw: 你改把要触发的selector放在on的第二个参数 11/01 00:55
16F：→ ckw: 我猜你先绑了on但是<select>还没长出来 11/01 00:58
17F：推 pm2001: 页面产生完再用console绑事件也一样吗 11/01 01:23
18F：推 frank910138: 就像ckw大 说的 你要先产生元素才绑on ，我写的应该 11/01 10:09
19F：→ frank910138: 可以才对...你能把你的程式码放在线上编辑器，我帮你 11/01 10:09
20F：→ frank910138: 看看 11/01 10:09
21F：→ qazsd: frank大大,可以给我线上编辑器的网址吗,感谢~ 11/01 17:21
22F：推 ckw: 建议你把jquery.on()的说明再仔细看一下，应该就知道问题在哪 11/01 19:08
24F：→ ckw: script那区有三种写法,你改了之後按上面的run右下才会刷新 11/01 19:24
25F：→ ckw: 线上编辑器现在蛮多的,但我jsfiddle用最久比较习惯 11/01 19:25
26F：→ ckw: 你三种都测测看效果如何,再搭官方文件看 11/01 19:26
28F：→ qazsd: 感谢各位大大,我研究看看 11/01 20:03
29F：推 vi000246: 把onchange写在window.load看看 11/01 20:29
30F：推 aspdoctor: 你绑定事件的时候元件还没生出来吧 11/03 01:48
31F：推 FromTo: on改成live试看看 11/13 13:43