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

作者: red0whale (red whale)   2016-08-19 21:31:48
┌─────┐
│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插入的東西
請問該怎麼解決這問題?
謝謝
作者: Hevak (Arthow Eshes)   2016-08-19 22:04:00
不是不允許控制以ajax插入,而是你$('#a'aa).on('click')的這個執行的時間點不對上面ajax執行的時候會發出非同步的動作,等到收到回傳值才把回傳值丟進你ajax那個參數裡面的那個function(也就是callback)。你發出了一個非同步的動作,那一行下面的code會繼續被同步執行,無視於非同步的東西已經執行完了與否。所以你的 $('#aaa').on('click')應該要放在$('#bbb').html(result);那一行的下面,這個時間點因為非同步的動作已經值行完畢了,回到callback function裡面的東西又是同步的思維,$('#bbb')先把id="aaa"的html塞進去#bbb了,這時候頁面上才有id="aaa"的元素,同時$('#aaa')也才有辦法選擇到對應的元素。而你原先有問題的作法的流程是:1. 發出一個非同步動作,此時ajax回傳值還沒回來2. 繼續同步執行下面的$('#aaa'),因為頁面上還沒有id="aaa"的元素,所以$("#aaa")選不到任何東西,也綁不上事件3. 這時候ajax回傳值才回來,執行$('#bbb').html(result),直到這時候的bbb裡面才有id="aaa"的元素
作者: CrazyAngel (無口系天然呆)   2016-08-20 22:33:00
$('#bbb').on('click', '#aaa', function(){ ... });

Links booklink

Contact Us: admin [ a t ] ucptt.com