jQuery不附加到动态创建的元素

Question

在我的页面上,我有一个动态生成的单选按钮列表(使用AJAX创建).单选按钮列表是动态生成的,因为它基于先前的表单选择而更改.下面是一个动态生成的单选按钮列表的示例(这在Firefox的DOM查看器附加组件中显示,但不在"查看页面源"中显示):

<li>
<input name="giftcard_value" type="radio" id="25" value="25" />
<label for="25">$25</label>
<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a>
</li>

<li>
<input name="giftcard_value" type="radio" id="50" value="50" />
<label for="50">$50</label>
<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a>
</li>

我还有另一个jQuery脚本,我用来通过链接/图像间接"点击"单选按钮.在上面的代码中,实际的单选按钮(在输入标签内)对用户是隐藏的.用户通过单击具有"radio-select"类(这实际上是图像)的Select链接来单击单选按钮.jQuery脚本检测用'$(".radio-select")点击链接/图像的时间.点击'然后运行一个"点击/检查"实际单选按钮的功能.这是jQuery脚本:

$(".radio-select").click(
            function(event) {
                event.preventDefault();
                var $boxes = $(this).parent().parent().children();
                $boxes.removeClass("selected");
                $(this).parent().addClass("selected");
                $(this).parent().find("[type=radio]").click().attr("checked","checked");
            }
        );

我的问题是jQuery脚本不能与动态生成的单选按钮一起使用.如果我将单选按钮硬编码到html中(可以通过浏览器中的"查看页面源"查看),它可以工作,但如果它们是动态生成的话则不行.看起来jQuery无法检测到链接/图像上的".click",因此从不点击实际的单选按钮.知道问题是什么吗？任何帮助将非常感激!

Answer 1

检查delegate和on方法.

例

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

http://api.jquery.com/delegate/

来自jQuery页面,

从jQuery 1.7开始,.delegate()已被.on()方法取代.但是,对于早期版本,它仍然是使用事件委派的最有效方法

http://api.jquery.com/on/

例

$("p").on("click", function(){
alert( $(this).text() );
});