0

我的简单要求是这样的：

我有一个名为的页面loop.php，有两个radio A & B，当A被检查时，我加载a.html，当B被检查时加载b.html。

loop.php（最重要的部分）

<div>
    <input id="radio_one" type="radio" value="radio_one" />&nbsp;tpl_one&nbsp;
    <input id="radio_two" type="radio" value="radio_two" />&nbsp;tpl_two

    <!--template1-->
    <div id="tpl_one"></div>
    <!-- template 1 end-->

    <!-- template2 -->
    <div id="tpl_two"></div>
    <!--template 2 end-->
</div>

一个.html

<div>
    <input type="button" id="tpl_one_btn" name="" value="in tpl one"/>
</div>

b.html

<div>
    <input type="button" id="tpl_two_btn" name="" value="in tpl two"/>
</div>

我正在使用 jquery-1.9，我可以轻松实现我的要求。所有的 jquery 代码都在一个名为op.js

 $(function(){
   $("#radio_one").click(function(){
       $("#tpl_two").hide();
       $("#tpl_one").show();
       $("#tpl_one").load('a.html');
   });

   $("#radio_two").click(function(){
      $("#tpl_one").hide();
      $("#tpl_two").show();
      $("#tpl_two").load('b.html');
   });
 });

现在一切正常，我几乎可以做所有事情，但是当我想使用 a.html 和 b.html 上的按钮时，事情变得很糟糕。

在 op.js 中，当我单击 a.html 中的按钮时，我想触发一个事件

$("#tpl_one_btn").click(function(){
    console.log('button in a.html');
});

什么也没发生，也就是说我没有通过按钮的$("#tpl_one_btn") id获得load按钮loop.php通过 jquery ajax 函数的按钮。这次上面的代码运行良好。

我的问题是：

1. Why this happed, when I use load method ? 
   Why I cannot get the button via jquery id selector?

2. If I want to use load method, 
   how can I got the button using jquery id selector?

谢谢大家。

4

1 回答 1

6

您需要使用事件委托（因为您正在动态添加按钮）

$(document.body).on('click',"#tpl_one_btn",function(){
    console.log('button in a.html');
});
于 2013-06-25T14:22:32.820 回答