JQuery нет JavaScript работает внутри вкладок, созданных AJAX

Question

У меня есть эти вкладки jQuery, которые при нажатии нажимают на контент через ajax, но по какой-то причине кажется, что ничего из этого не работает, и у меня было много вещей в нем.

<li><a href="page.php">Page</a></li>

А на странице есть куча элементов, например

   <form id="create_upload_image_form_dialog_<?php echo $u_row['type']; ?>" onsubmit="return false;" method="post" action="<?php echo $urlbase; ?>/build/scripts/upload" enctype="multipart/form-data">
        <input onchange="create_upload_image_dialog('#create_upload_image_form_dialog_<?php echo $u_row['type']; ?>','<?php echo $u_row['type']; ?>','<?php echo $urlbase; ?>/themes/<?php echo $_SESSION['theme_root']; ?>/Library/Themes/<?php echo str_replace('+', '%20', urlencode($_SESSION['theme_name'])); ?>.theme/<?php echo $u_row['image_path'] . $u_row['image_name']; ?>.png');" type="file" name="imgfile" id="create_image_upload_<?php echo $u_row['type']; ?>" />        
        <input type="hidden" value="image_style_scale" name="image_style" id="image_style_dialog_<?php echo $u_row['type']; ?>"/>
        <input type="hidden" name="image_type" value="<?php echo $u_row['type']; ?>" />
        <input type="hidden" name="image_negative" value="" id="image_negative_dialog_<?php echo $u_row['type']; ?>"/>
        <input type="hidden" name="image_grayscale" value="" id="image_grayscale_dialog_<?php echo $u_row['type']; ?>"/>
    </form>
    Optimal image size is <?php echo $u_row['image_x'] * 2; ?>x<?php echo $u_row['image_y'] * 2; ?>.
</span>        
<span><form id="create_upload_image_form_<?php echo $u_row['type']; ?>" onsubmit="create_upload_image(this,'<?php echo $u_row['type']; ?>','<?php echo $urlbase; ?>/themes/<?php echo $_SESSION['theme_root']; ?>/Library/Themes/<?php echo str_replace('+', '%20', urlencode($_SESSION['theme_name'])); ?>.theme/<?php echo $u_row['image_path'] . $u_row['image_name']; ?>.png');return false;" method="post" action="<?php echo $urlbase; ?>/build/scripts/upload" enctype="multipart/form-data">
    <?php if (false/* strlen($u_row['image_default_path']) > 0 */) { ?><span><input type="button" value="Download original image" onClick="download_image();"/></span><?php } ?>
        <span class="resize_method">
            <button onclick="create_reset_image('<?php echo $u_row['type']; ?>','<?php echo $default; ?>');" >Reset</button>
            <button onclick="$('#upload_image_dialog_<?php echo $u_row['type']; ?>').dialog('open');return false;" id="create_upload_button-<?php echo $u_row['type']; ?>">Upload</button>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',this);" type="radio" name="image_style_<?php echo $u_row['type']; ?>" id="image_style_scale_<?php echo $u_row['type']; ?>" value="image_style_scale" checked="checked"/><label for="image_style_scale_<?php echo $u_row['type']; ?>">Scale</label>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',this);" type="radio" name="image_style_<?php echo $u_row['type']; ?>" id="image_style_stretch_<?php echo $u_row['type']; ?>" value="image_style_stretch"/><label for="image_style_stretch_<?php echo $u_row['type']; ?>">Stretch</label>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',this);" type="radio" name="image_style_<?php echo $u_row['type']; ?>" id="image_style_zoom_<?php echo $u_row['type']; ?>" value="image_style_zoom"/><label for="image_style_zoom_<?php echo $u_row['type']; ?>">Zoom</label>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',$('#image_style_<?php echo $u_row['type']; ?>'));" type="checkbox" name="image_negative" id="image_negative_<?php echo $u_row['type']; ?>" value="true"/><label for="image_negative_<?php echo $u_row['type']; ?>">Negative</label>
            <input onchange="create_update_elements('<?php echo $u_row['type']; ?>',$('#image_style_<?php echo $u_row['type']; ?>'));" type="checkbox" name="image_grayscale" id="image_grayscale_<?php echo $u_row['type']; ?>" value="true"/><label for="image_grayscale_<?php echo $u_row['type']; ?>">Grayscale</label>
            <button id="okay_button_<?php echo $u_row['type']; ?>" onclick="$('create_upload_image_form_<?php echo $u_row['type']; ?>').submit();">Save</button>
        </span>
        <br />
        <span style="display:none;">
            <label for="image_background_color_<?php echo $u_row['type']; ?>">Background color</label><input type="text" name="image_background_color" id="image_background_color_<?php echo $u_row['type']; ?>"/>
            <label for="image_tint_color_<?php echo $u_row['type']; ?>">Tint color</label><input type="text" name="image_tint_color" id="image_tint_color_<?php echo $u_row['type']; ?>"/>
        </span>
        <input type="hidden" name="image_type" value="<?php echo $u_row['type']; ?>" />
        <input type="hidden" id="image_style_<?php echo $u_row['type']; ?>" name="image_style" value="image_style_scale" />
    </form></span><br />

И у меня есть jQuery UI, который делает эти элементы действительно красивыми, и у меня есть некоторые другие вещи, которые не работают. Вот этот JS

$('#create_theme').tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. ");
            }
        }
    });
    $('.tab_images').accordion({
        autoHeight: false,
        header: 'h3'
    });
    $(".upload_image_dialog").dialog({ 
        autoOpen: false 
    });
    $("input[type='button']").button();
    $('.resize_method').buttonset();
        $('.presets').hover(function(){
        $('.presets').css('overflow-y','auto');
    },function(){
        $('.presets').css('overflow-y','hidden');
    });

в основном, когда он там с самого начала, он работает, но все, что происходит через ajax, не работает. Я видел некоторые вещи, которые имеют отношение к $ .live () (не рекомендуется для $ .on () в 1.7), которые могут мне здесь помочь, но я серьезно потерян.

Answer 1

Я бы хотел делегировать сюда, чтобы вывести код из разметки. Преимущество делегата перед живым заключается в том, что живое связывается с телом, а делегат (в этом примере) связывается с классом .resize_method:

<span class="resize_method"> 

старый фрагмент разметки:

<button onclick="create_reset_image('<?php echo $u_row['type']; ?>','<?php echo $default; ?>');" >Reset</button> 

изменена разметка (я добавил к кнопке идентификатор, но вы также можете использовать другие селекторы):

<button id='myReset'>Reset</button>

новый код: (также поместите другие вещи в событие готовности документа)

$(document).ready(function(){
    $('.resize_method).delegate('#myReset', 'click', function(){
        create_reset_image('<?php echo $u_row['type']; ?>','<?php echo $default; ?>');" 
    });
});

Answer 2

Почему бы вам не поместить эти методы ON EVENT (методы, определенные в onclick, атрибуты onchange) этих html-элементов в метод jquery document-ready, подобный тем, которые вы уже добавили туда?поддерживать его действительно сложно, потому что вы поместили его непосредственно в элементы HTML.Я уверен, что вы поймете, как использовать $ .live, если вы сделаете это.
Допустим, вы указали «my_reset_button» в качестве идентификатора первой кнопки (которая имеет значение «Сброс»)

<button id="my_reset_button" name="my_reset_button" type="button">Reset</button>

Функция готовности внутри документа jquery,

$('#my_reset_button').live('click', function(){

    create_reset_image('<?php echo $u_row['type']; ?>','<?php echo $default; ?>');

);