jquery - 动态单选按钮作为导航在页面刷新之前不起作用

Question

我有一堆单选按钮，在弹出窗口中，它们使用下面的内容来显示和隐藏相关的 div，从而允许将它们用作一种导航形式。

   $(":radio[name='radio']").on("change", function () {
        var test = $(this).val();
        $(".radio").hide();
        $("#" + test).show();
    });

这在我加载页面时发现，代码包含在

$('#gameIndex').on('pageshow', function (event, ui) {

不过，我还希望能够动态添加新的单选按钮 - 按钮指向的 div 已存在于页面上。我正在添加按钮:

$("#buttons").append('button code')

然后刷新包含按钮的 div:

$("#radiodiv").trigger("create");

然后当我使用 tte 按钮触发弹出窗口时，它们都按预期显示并且主题正确。然而，当按钮被点击时，它们什么都不做，它们甚至似乎没有触发任何类型的事件。如果我刷新页面，它们都会按预期开始工作。

有人可以帮我解决这个问题吗？

Answer 1

您当前的更改绑定(bind):

$(":radio[name='radio']").on("change", function () {
    var test = $(this).val();
    $(".radio").hide();
    $("#" + test).show();
});

不会在新添加的元素上追溯工作，您需要使用委托(delegate)事件绑定(bind)才能工作:

$(document).on('change', ':radio[name="radio"]',function () {
    var test = $(this).val();
    $(".radio").hide();
    $("#" + test).show();
});