作者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://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: script那區有三種寫法,你改了之後按上面的run右下才會刷新 11/01 19:24
→ ckw: 線上編輯器現在蠻多的,但我jsfiddle用最久比較習慣 11/01 19:25
→ ckw: 你三種都測測看效果如何,再搭官方文件看 11/01 19:26
→ 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