[爆卦]JavaScript 改變 下拉選單是什麼?優點缺點精華區懶人包

為什麼這篇JavaScript 改變 下拉選單鄉民發文收入到精華區:因為在JavaScript 改變 下拉選單這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者qazsd (知足常樂)看板Web_Design標題[問題] 下拉式選單改變選項後觸發jQuer...


請問一下板上各位高手

小弟有個表格

表格每列都有迴圈產生的下拉式選單,想要使用者改變選單選項時,會觸發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://www.ptt.cc/bbs/Web_Design/M.1446306450.A.889.html
※ 編輯: qazsd (123.195.39.72), 10/31/2015 23:48:27
frank910138: 那換個寫法,應該可行 11/01 00:06
frank910138: $(document).on('Change', '.big', function(){ 11/01 00:06
frank910138: //do something 11/01 00:06
frank910138: }); 11/01 00:06
tsao1211: 你select 要先產生完 再 on change 11/01 00:27
qazsd: 上面都是寫在Ajax的success區塊內,有先寫select的程式碼 11/01 00:29
qazsd: 在寫JS change的程式碼 11/01 00:30
qazsd: 回frank大大,剛試過好像沒生效 11/01 00:32
qazsd: 若不使用jQuery的寫法,使用傳統的做法(select id="product 11/01 00:38
qazsd: " class="big" onChange="update()"), 再加上function upda 11/01 00:39
qazsd: te(){//do something}則可生效,但不知為何jQuery得方法行 11/01 00:39
qazsd: 不通? 11/01 00:40
qazsd: 但是使用傳統的做法時,JavaScript裡面寫var value = $(this 11/01 00:52
qazsd: ).val()則會出錯 11/01 00:53
ckw: 你改把要觸發的selector放在on的第二個參數 11/01 00:55
ckw: 我猜你先綁了on但是<select>還沒長出來 11/01 00:58
pm2001: 頁面產生完再用console綁事件也一樣嗎 11/01 01:23
frank910138: 就像ckw大 說的 你要先產生元素才綁on ,我寫的應該 11/01 10:09
frank910138: 可以才對...你能把你的程式碼放在線上編輯器,我幫你 11/01 10:09
frank910138: 看看 11/01 10:09
qazsd: frank大大,可以給我線上編輯器的網址嗎,感謝~ 11/01 17:21
ckw: 建議你把jquery.on()的說明再仔細看一下,應該就知道問題在哪 11/01 19:08
ckw: 我寫了個範例 https://jsfiddle.net/u2ed24eg/ 11/01 19:23
ckw: script那區有三種寫法,你改了之後按上面的run右下才會刷新 11/01 19:24
ckw: 線上編輯器現在蠻多的,但我jsfiddle用最久比較習慣 11/01 19:25
ckw: 你三種都測測看效果如何,再搭官方文件看 11/01 19:26
ckw: 追加了四跟五 https://jsfiddle.net/u2ed24eg/1/ 11/01 19:32
qazsd: 感謝各位大大,我研究看看 11/01 20:03
vi000246: 把onchange寫在window.load看看 11/01 20:29
aspdoctor: 你綁定事件的時候元件還沒生出來吧 11/03 01:48
FromTo: on改成live試看看 11/13 13:43

你可能也想看看

搜尋相關網站