作者red0whale (red whale)
看板Ajax
标题[问题] 控制以AJAX插入的东西…
时间Fri Aug 19 21:31:48 2016
┌─────┐
│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://webptt.com/cn.aspx?n=bbs/Ajax/M.1471613513.A.5FD.html
1F:推 Hevak: 不是不允许控制以ajax插入,而是你$('#a'aa).on('click')的 08/19 22:04
2F:→ Hevak: 这个执行的时间点不对 08/19 22:05
3F:→ Hevak: 上面ajax执行的时候会发出非同步的动作,等到收到回传值才 08/19 22:05
4F:→ Hevak: 把回传值丢进你ajax那个参数里面的那个function(也就是call 08/19 22:05
5F:→ Hevak: back)。你发出了一个非同步的动作,那一行下面的code会继续 08/19 22:06
6F:→ Hevak: 被同步执行,无视於非同步的东西已经执行完了与否。 08/19 22:06
7F:→ Hevak: 所以你的 $('#aaa').on('click')应该要放在$('#bbb').html( 08/19 22:07
8F:→ Hevak: result);那一行的下面,这个时间点因为非同步的动作已经值 08/19 22:07
9F:→ Hevak: 行完毕了,回到callback function里面的东西又是同步的思维 08/19 22:08
10F:→ Hevak: ,$('#bbb')先把id="aaa"的html塞进去#bbb了,这时候页面上 08/19 22:08
11F:→ Hevak: 才有id="aaa"的元素,同时$('#aaa')也才有办法选择到对应的 08/19 22:09
12F:→ Hevak: 元素。 08/19 22:09
13F:→ Hevak: 而你原先有问题的作法的流程是: 08/19 22:09
14F:→ Hevak: 1. 发出一个非同步动作,此时ajax回传值还没回来 08/19 22:09
15F:→ Hevak: 2. 继续同步执行下面的$('#aaa'),因为页面上还没有id="aaa 08/19 22:10
16F:→ Hevak: "的元素,所以$("#aaa")选不到任何东西,也绑不上事件 08/19 22:10
17F:→ Hevak: 3. 这时候ajax回传值才回来,执行$('#bbb').html(result), 08/19 22:10
18F:→ Hevak: 直到这时候的bbb里面才有id="aaa"的元素 08/19 22:11
19F:推 CrazyAngel: $('#bbb').on('click', '#aaa', function(){ ... }); 08/20 22:33