动态单选按钮，因为导航直到页面刷新才起作用 [英] dynamic radio buttons as navigation not working until page refresh

问题描述

在弹出窗口中，我有一堆单选按钮，它们使用以下内容显示和隐藏相关的div，因此可以将它们用作导航形式.

I have a bunch of radio buttons, in a popup, that use the below to show and hide related divs, thus allowing them to be used as a form of navigation.

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

这可以在我加载页面时找到，代码包含在

This works find when I load the page, the code is contained within the

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

但是，我还希望能够动态添加新的单选按钮-页面上已存在的divs按钮点. 我将按钮添加为:

However I also want to be able to dynanically add new radio buttons - the divs the button point to already exist on the page. I'm adding the buttons with:

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

，然后刷新包含按钮的div:

and then refreshing the div that contians the buttons with:

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

当我然后使用tte按钮触发弹出窗口时，它们都按预期显示，并且主题正确.但是，当单击按钮时，它们什么也不做，甚至似乎都不会触发任何事件.如果我刷新页面，它们都会按预期开始工作.

When I then trigger the popup with tte buttons they all appear as expected and are themed correctly. however when the buttons are clicked on they do nothing, they don't even seems to fire any kind of event. If I refesh the page they all start to work as expected.

有人可以帮我吗?

推荐答案

您当前的更改绑定:

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

将无法追溯到新添加的元素，您需要使用委托事件绑定才能使其正常工作:

will not work retroactively on newly added elements, you need to use a delegated event binding for it to work:

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

这篇关于动态单选按钮，因为导航直到页面刷新才起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！