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

您当前的更改绑定：

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

不会追溯新添加的元素，您需要使用委托的事件绑定才能工作：

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

Answer 2

使用此代码： Refrence
$(":radio[name='radio']").live("change", function() { var test = $(this).val(); $(".radio").hide(); $("#" + test).show(); });

动态单选按钮作为导航在页面刷新之前无法工作

2 个答案: