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

Answer 2

$(".radio-select").live("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");
                }
            );

Answer 3

问题在于，当您调用click方法时，创建的事件处理程序仅附加到当时存在的所有元素。您的解决方案是在创建元素时添加调用以附加单击处理程序，或使用on（）函数附加到选择器。

Answer 4

如果您使用的是jQuery 1.3.2及更高版本，则需要使用jQuery live。所以你的绑定会变成：

 $(".radio-select").live('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");

        }
   );

如果您使用的是1.3.2以下的jQuery，请使用livequery插件。

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

4 个答案: