Question

我的简单要求是这样的：

我有一个名为loop.php的页面，有两个radio A & B，当选中A时，我加载a.html，当B被选中时加载{{ 1}}。

loop.php（最重要的部分）

b.html

a.html

<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>

b.html

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

我正在使用jquery-1.9，我可以轻松实现我的要求。所有jquery代码都在一个名为<div> <input type="button" id="tpl_two_btn" name="" value="in tpl two"/> </div>

的文件中

op.js

现在一切都很好，我几乎可以做所有事情，但当我想使用a.html＆amp ;;上的按钮时，事情变得很糟糕。 b.html。

在op.js中，我想点击a.html中的按钮

时触发事件

 $(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');
   });
 });

没有任何事情发生，也就是说我没有通过按钮的ID $("#tpl_one_btn").click(function(){ console.log('button in a.html'); });获得按钮我意识到问题可能是因为$("#tpl_one_btn")方法，所以我有一个实验，我将按钮移动到load就是说，我没有通过jquery ajax函数加载按钮。而这次上面的代码进展顺利。

我的问题是：

loop.php

谢谢大家。

Answer 1

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

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

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

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

1 个答案: