[問題] 控制以AJAX插入的東西…

看板Ajax作者 (red whale)時間8年前 (2016/08/19 21:31), 編輯推噓2(2017)
留言19則, 2人參與, 最新討論串1/1
┌─────┐ │index.htm │ └─────┘ … <style> #aaa{ background: red; width: 200px; height: 200px; } </style> <script> $(function(){ $.post("demo.php",{id:"aaa"},function(result){ $("#bbb").html(result); }); $("#aaa").on('click', function(){ alert("Hello world!"); }); }); </script> <div id="bbb"></div> … ┌────┐ │demo.php│ └────┘ <div id='<? echo $_POST['id']; ?>'></div> ========== 大家好, 以上範例我想讓一個id為aaa的<div>以AJAX的方式插入於id為bbb的<div>中 插入後會看到一紅色方塊 但問題是我想讓使用者按下那紅色方塊後可以跳出一警告方框 Javascript好像不允許控制以AJAX插入的東西 請問該怎麼解決這問題? 謝謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 101.138.145.92 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1471613513.A.5FD.html

08/19 22:04, , 1F
不是不允許控制以ajax插入,而是你$('#a'aa).on('click')的
08/19 22:04, 1F

08/19 22:05, , 2F
這個執行的時間點不對
08/19 22:05, 2F

08/19 22:05, , 3F
上面ajax執行的時候會發出非同步的動作,等到收到回傳值才
08/19 22:05, 3F

08/19 22:05, , 4F
把回傳值丟進你ajax那個參數裡面的那個function(也就是call
08/19 22:05, 4F

08/19 22:06, , 5F
back)。你發出了一個非同步的動作,那一行下面的code會繼續
08/19 22:06, 5F

08/19 22:06, , 6F
被同步執行,無視於非同步的東西已經執行完了與否。
08/19 22:06, 6F

08/19 22:07, , 7F
所以你的 $('#aaa').on('click')應該要放在$('#bbb').html(
08/19 22:07, 7F

08/19 22:07, , 8F
result);那一行的下面,這個時間點因為非同步的動作已經值
08/19 22:07, 8F

08/19 22:08, , 9F
行完畢了,回到callback function裡面的東西又是同步的思維
08/19 22:08, 9F

08/19 22:08, , 10F
,$('#bbb')先把id="aaa"的html塞進去#bbb了,這時候頁面上
08/19 22:08, 10F

08/19 22:09, , 11F
才有id="aaa"的元素,同時$('#aaa')也才有辦法選擇到對應的
08/19 22:09, 11F

08/19 22:09, , 12F
元素。
08/19 22:09, 12F

08/19 22:09, , 13F
而你原先有問題的作法的流程是:
08/19 22:09, 13F

08/19 22:09, , 14F
1. 發出一個非同步動作,此時ajax回傳值還沒回來
08/19 22:09, 14F

08/19 22:10, , 15F
2. 繼續同步執行下面的$('#aaa'),因為頁面上還沒有id="aaa
08/19 22:10, 15F

08/19 22:10, , 16F
"的元素,所以$("#aaa")選不到任何東西,也綁不上事件
08/19 22:10, 16F

08/19 22:10, , 17F
3. 這時候ajax回傳值才回來,執行$('#bbb').html(result),
08/19 22:10, 17F

08/19 22:11, , 18F
直到這時候的bbb裡面才有id="aaa"的元素
08/19 22:11, 18F

08/20 22:33, , 19F
$('#bbb').on('click', '#aaa', function(){ ... });
08/20 22:33, 19F
文章代碼(AID): #1Njmf9Nz (Ajax)
文章代碼(AID): #1Njmf9Nz (Ajax)