切换无线电集时jQuery click（）不起作用答案

【问题标题】：jQuery click() not working when switching radio set切换无线电集时jQuery click（）不起作用
【发布时间】：2016-02-21 17:29:58
【问题描述】：

我有一个包含一组单选按钮的代码。我根据给定条件更改按钮集。我需要知道切换设置后用户选择了哪个单选按钮。它适用于原始集，但在切换集上单击不会触发。

这是一个示例代码。选中后，原始单选按钮集可以正常工作，并且我会收到有关用户选择的警报。添加了一个按钮以将收音机切换到另一组，但是当我检查新（切换）组中的按钮时，点击不会触发。

非常感谢您的帮助和建议。

    <!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("input[type='radio']").click(function() {
                var selected = $("input[type='radio'][name='opt']:checked");
                alert(selected.val());
            });

            $("#switchRadioSetButton" ).click(function() {
                var secondSetRadios = "<input type=\"radio\" name=\"opt\" value=\"B1\"/>B1<br/><input type=\"radio\" name=\"opt\" value=\"B2\"/>B2<br/>";
                $("#div1").html(secondSetRadios);
            });     

        });
    </script>
</head>
<body>
    <div id="div1" >
        <input type="radio" name="opt" value="A1"/>A1<br/>
        <input type="radio" name="opt" value="A2"/>A2<br/>
    </div>
    <button id="switchRadioSetButton">Switch Radio Set</button><br/>
</body>
</html>

【问题讨论】：

标签： jquery click radio

【解决方案1】：

所以我认为问题是这样的。如果我又错了，请纠正我。所以基本上当你改变收音机的html时，这个事件就会被破坏。

其他问题的答案

这很可能是因为事件没有被委托。加载页面时，您绑定点击事件。但是随着 dom 被操纵（元素被移除），事件被删除。为此，您必须使用委托。

Why does this jQuery .change event stop working after .click event

代码已删除

$("input[name='opt']").click(function(){
    var selected = $("input[type='radio'][name='opt']:checked");
    alert(selected.val());
});

我添加的代码

$('#div1').on('change', ':radio', function(){
    var selected = $("input[type='radio'][name='opt']:checked");
    alert(selected.val());
});

示例

https://jsfiddle.net/c37at0jn/

【讨论】：

感谢您的反馈。更换收音机不是问题。我的问题是一旦更改了集合，点击就不会触发。在实际程序中，有一个精心设计的导航结构，我会根据不相关的条件对其进行更改。我第一次绘制屏幕时（实际上使用 $("#div1").html(htmlContent1) - 不是硬编码）它可以工作，但是当我更改内容和单选集时，单击停止触发。有趣的是，如果我使用“附加”（例如，$("#div1").append(htmlContent1);）单击会继续触发第一个 HTML 单选集，但在随后附加的 html 中不会。
@tonyshams 我更新了我的答案以解决单选按钮在单击后没有被触发的问题。
是的！你解决了。现在可以了。非常感谢您的帮助。

【解决方案2】：

使用prop()

 $("input[type='radio']").prop(function(){
   //code goes here
 });

而不是click()

【讨论】：

感谢您的建议，尝试了道具但没有成功。