使用JQUERY动态添加单选按钮，并将jquery更改事件连接到生成的单选按钮

Question

我正在使用jQuery向我的页面添加一组单选按钮，如下所示：

  $(document).ready(function() {
    $("#Search").click(function() {
        var keyword = $('#keyWord').val();
        var EntityType = $("#lstEntityTypes  :selected").text();

        var postData = { type: EntityType, keyWord: keyword };
        // alert(postData.VehicleType);
        $.post('/EntityLink/GetJsonEntitySearchResults', postData, function(GRdata) {
            var grid = '<table><tr><td>ID</td><td>Name</td><td></td>';
            for (var i = 0; i < GRdata.length; i++) {
                grid += '<tr><td>';
                grid += GRdata[i].ID;
                grid += '</td><td>';
                grid += GRdata[i].EntityName;
                grid += '</td><td>';
                grid += '<input type="radio" name="EntitiesRadio" value="' + GRdata[i].ID + '" />';
                grid += '</td></tr>';
            }

            grid += '</table>';

            alert(grid);

            $("#EntitySearchResults").html(grid);

            $("EntitiesRadio").change(function() {
                alert($("EntitiesRadio :checked").val());
                $("EntityID").val($("EntitiesRadio :checked").val());
                alert($("EntityID").val());
                $("EntityName").val($("#lstEntityTypes  :selected").text());
            });
        });

    });
    //
});

当页面加载时，没有EntitiesRadio名称范围，所以我尝试在相同的搜索点击方法中注册entitiesRadio更改函数，但它没有注册。我该如何使更改事件触发以更新我的隐藏输入？

- Barry

Answer 1

您可以使用 live 事件，它将自动适用于页面上创建的任何新元素。
http://api.jquery.com/live/ 因此，您只需添加以下代码一次，它就会应用于所有新创建的元素：

$(".EntitiesRadio").live('change', function() {
    alert($(".EntitiesRadio :checked").val());
    $("#EntityID").val($(".EntitiesRadio :checked").val());
    alert($("#EntityID").val());
    $("#EntityName").val($("#lstEntityTypes  :selected").text());
});

同时确保在调用类名时添加 "."，在调用Id时添加 "#"，因为似乎你在代码中忽略了这一点。

- Amr Elgarhy

---

不要忘记使用委托，它与直接绑定事件相比更加高效。了解更多信息请访问：http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/ - Seaux

是的，你说得对。从1.4版本开始，委托是jQuery中非常好的一个补充。 - Amr Elgarhy

嗨，感谢回复。是的，我错过了“.”，但即使使用“live（'change'）”，它仍然无法正常工作。但我改为使用点击功能，现在可以正常工作了。$(".EntitiesRadio").live('click', function() { $("#EntityID").val($(this).val()); $("#EntityType").val($("#lstEntityTypes :selected").text()); alert($("#EntityType").val()); });感谢大家的帮助。 - Barry

非常感谢。它像魔法一样奏效。我希望我可以给你投多个赞！:P - joaorodr84

Answer 2

$("EntitiesRadio") 找不到任何东西，因为没有这样的标签。如果您想按ID选择，请使用$("#EntitiesRadio")，如果要按类选择，请使用$(".EntitiesRadio")。

一旦HTML添加到页面中，您可以将更改事件绑定到它上面。要使更改事件自动绑定到新匹配元素，您可以使用live API。

$(".EntitiesRadio").live('change', function() {} );

- sorpigal

Answer 3

只是一个观察，但是$("EntitiesRadio")可能更好地改为$(".EntitiesRadio")？如果它们是类，则需要使用$(".EntitiesRadio")，并且使用class="EntitiesRadio"而不是name="EntitiesRadio"

如果您想使用name="EntitiesRadio"，则必须使用

$("input[name*='EntitiesRadio']")

- Mark Schultheiss

---

当然，使用$("input[name*='EntitiesRadio']").live("change",function(){});。 - Mark Schultheiss