Динамические переключатели, так как навигация не работает до обновления страницы

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(); });