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使这些元素看起来非常好，我在这里也有一些其他的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（）有关的事情（在1.7中为$ .on（）弃用）可能对我有帮助，但我真的很丢失。

Answer 1

为什么不把这些html元素的on EVENT方法（在onclick，onchange属性中定义的方法）放在jquery document-ready方法中，类似于你已经放在那里的方法？它很难维护，因为你把它直接放在html元素中。如果你这样做，我相信你会明白如何使用$ .live 假设您将“my_reset_button”作为第一个按钮的ID（其值为“Reset”）

<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; ?>');

);

Answer 2

我倾向于委托这里从代码中获取代码。委托超过直播的优点是活体绑定到身体和委托（在此示例中）绑定到.resize_method分类元素：

<span class="resize_method">

旧标记剪辑：

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

更改了标记（我在按钮上添加了一个ID，但如果您愿意，也可以使用其他选择器）：

<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; ?>');" 
    });
});

jQuery没有javascript工作在ajax创建的选项卡

2 个答案: