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

[red0whale (red whale)]

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