作者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/m.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