使用load方法时,jquery无法使用id选择器获取按钮

Question

我的简单要求是这样的:

我有一个页面命名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>

a.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');
});

什么都没发生,这就是说我没有通过按钮的id得到按钮$("#tpl_one_btn") 我意识到可能问题是因为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?

谢谢大家.

Answer 1

您需要使用事件委派(因为您动态添加按钮)

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

• http://learn.jquery.com/events/event-delegation/