Wordpress 的 Javascript 上传按钮问题

Question

我正在开发一个 WordPress 主题，其主题选项页面包含一个无限幻灯片生成器，每张幻灯片包含几个字段和一个上传按钮，用于将图像上传到每张幻灯片。 问题是上传按钮不起作用。 如您所见，上传按钮有 class="image_upload_button"

function pixy_admin_head() { 
$data = get_option(OPTIONS); ?>
<script type="text/javascript" language="javascript">

    jQuery.noConflict();
    jQuery(document).ready(function($) {


    //AJAX Upload
        $('.image_upload_button').each(function() {
        var clickedObject = $(this);
        var clickedID = $(this).attr('id');     
        var nonce = $('#security').val();

        new AjaxUpload(clickedID, {
            action: ajaxurl,
            name: clickedID, // File upload name
            data: { // Additional data to send
                action: 'pixy_ajax_post_action',
                type: 'upload',
                security: nonce,
                data: clickedID },
            autoSubmit: true, // Submit file after selection
            responseType: false,
            onChange: function(file, extension) {},
            onSubmit: function(file, extension) {
                clickedObject.text('Uploading'); // change button text, when user selects file  
                this.disable(); // If you want to allow uploading only 1 file at time, you can disable upload button
                interval = window.setInterval(function() {
                    var text = clickedObject.text();
                    if (text.length < 13) { clickedObject.text(text + '.'); }
                    else { clickedObject.text('Uploading'); } 
                    }, 200);
            },
            onComplete: function(file, response) {
                window.clearInterval(interval);
                clickedObject.text('Upload Image'); 
                this.enable(); // enable upload button


                // If nonce fails
                if(response==-1) {
                    var fail_popup = $('#pixy-popup-fail');
                    fail_popup.fadeIn();
                    window.setTimeout(function() {
                    fail_popup.fadeOut();                        
                    }, 2000);
                }

                // If there was an error
                else if(response.search('Upload Error') > -1) {
                    var buildReturn = '<span class="upload-error">' + response + '</span>';
                    $(".upload-error").remove();
                    clickedObject.parent().after(buildReturn);

                    }

                else {
                    var buildReturn = '<img class="hide pixy-option-image" id="image_'+clickedID+'" src="'+response+'" alt="" />';

                    $(".upload-error").remove();
                    $("#image_" + clickedID).remove();  
                    clickedObject.parent().after(buildReturn);
                    $('img#image_'+clickedID).fadeIn();
                    clickedObject.next('span').fadeIn();
                    clickedObject.parent().prev('input').val(response);
                }
            }
        });

        });


        });         


            //Add new slide
$(".slide_add_button").live('click', function(){        
    var slidesContainer = $(this).prev();
    var sliderId = slidesContainer.attr('id');
    var sliderInt = $('#'+sliderId).attr('rel');

    var numArr = $('#'+sliderId +' li').find('.order').map(function() { 
        var str = this.id; 
        str = str.replace(/\D/g,'');
        str = parseFloat(str);
        return str;         
    }).get();

    var maxNum = Math.max.apply(Math, numArr);
    if (maxNum < 1 ) { maxNum = 0};
    var newNum = maxNum + 1;

    var newSlide = '<li class="temphide"><div class="slide_header"><strong>Slide ' + newNum + '</strong><input type="hidden" class="slide pixy-input order" name="' + sliderId + '[' + newNum + '][order]" id="' + sliderId + '_slide_order-' + newNum + '" value="' + newNum + '"><a class="slide_edit_button" href="#">Edit</a></div><div class="slide_body" style="display: none; "><label>Slide Type</label><div class="slide pixy-checkbox"><input class="slide pixy-radio pixy-slider-type" name="' + sliderId + '[' + newNum + '][type]" type="radio" value="html"><div>HTML Slide</div><input class="slide pixy-radio pixy-slider-type" name="' + sliderId + '[' + newNum + '][type]"  type="radio" value="video"><div>Video/ Image Wide Slide</div></div><label>Slide Title</label><input class="slide pixy-input pixy-slider-title" name="' + sliderId + '[' + newNum + '][title]" id="' + sliderId + '_' + newNum + '_slide_title" value=""><label>Slide Description</label><input class="slide pixy-input" name="' + sliderId + '[' + newNum + '][desc]" id="' + sliderId + '_' + newNum + '_slide_desc" value=""><label>Add Slide Background Image. Enter URL or Upload.</label><input class="slide pixy-input" name="' + sliderId + '[' + newNum + '][url]" id="' + sliderId + '_' + newNum + '_slide_url" value="" /><div class="upload_button_div"><span class="button image_upload_button" id="' + sliderId + '_' + newNum + '">Upload</span><span class="button image_reset_button hide" id="reset_' + sliderId + '_' + newNum + '" title="' + sliderId + '_' + newNum + '">Remove</span></div><div class="screenshot"></div><label>Slide Content</label><textarea class="slide pixy-input" name="' + sliderId + '[' + newNum + '][content]" id="' + sliderId + '_' + newNum + '_slide_content" cols="8" rows="8"></textarea><a class="slide_delete_button" href="#">Delete</a><div class="clear"></div></div></li>';

    slidesContainer.append(newSlide);
    $('.temphide').fadeIn('fast', function() {
        $(this).removeClass('temphide');
    });

    return false;
}); 

    }); //end doc ready

当我使用“添加新幻灯片”按钮 class="slide_add_button"生成幻灯片时，它是由 jQuery 生成的(*参见上面的“var newSlide”，以及上传按钮 class="image_upload_button")，如果我保存选项，然后刷新页面，它会重新生成一个可以运行的 PHP 代码。

PHP 代码:

    public static function optionsframework_slider_function($id,$std,$oldorder,$order,$int){
        $data = get_option(OPTIONS);

        $slider = '';
        $slide = array();
        $slide = $data[$id];

        if (isset($slide[$oldorder])) { $val = $slide[$oldorder]; } else {$val = $std;}
        //initialize all vars
        $slidevars = array('type', 'title', 'desc', 'url', 'content');
        foreach ($slidevars as $slidevar) {
            if (!isset($val[$slidevar])) {
                $val[$slidevar] = '';
            }
        }
        //begin slider interface    
        if (!empty($val['title'])) {
            $slider .= '<li><div class="slide_header"><strong>'.stripslashes($val['title']).'</strong>';
        } else {
            $slider .= '<li><div class="slide_header"><strong>Slide '.$order.'</strong>';
        }
        $slider .= '<input type="hidden" class="slide pixy-input order" name="'. $id .'['.$order.'][order]" id="'. $id.'_'.$order .'_slide_order" value="'.$order.'" />';
        $slider .= '<a class="slide_edit_button" href="#">Edit</a></div>';
        $slider .= '<div class="slide_body">';
        $slider .= '<label>Slide Type</label>';
        $slider .= '<div class="slide pixy-checkbox">';
        $slider .= '<input class="slide pixy-radio pixy-slider-type" name="'. $id .'['.$order.'][type]"  type="radio" value="html"';
        if($val['type'] == 'html'){ $slider .= 'checked="checked">'; } else { $slider .= '>'; }
        $slider .= '<div>HTML Slide</div>';
        $slider .= '<input class="slide pixy-radio pixy-slider-type" name="'. $id .'['.$order.'][type]" type="radio" value="video"';
        if($val['type'] == 'video'){ $slider .= 'checked="checked">'; } else { $slider .= '>'; }       
        $slider .= '<div>Video/ Image Wide Slide</div>';
        $slider .= '</div>';
        $slider .= '<label>Slide Title</label>';
        $slider .= '<input class="slide pixy-input pixy-slider-title" name="'. $id .'['.$order.'][title]" id="'. $id .'_'.$order .'_slide_title" value="'. stripslashes($val['title']) .'" />';
        $slider .= '<label>Slide Description</label>';
        $slider .= '<input class="slide pixy-input" name="'. $id .'['.$order.'][desc]" id="'. $id .'_'.$order .'_slide_desc" value="'. $val['desc'] .'" />';



        $slider .= '<label>Add Slide Background Image. Enter URL or Upload.</label>';
        $slider .= '<input class="slide pixy-input" name="'. $id .'['.$order.'][url]" id="'. $id .'_'.$order .'_slide_url" value="'. $val['url'] .'" />';
        $slider .= '<div class="upload_button_div"><span class="button image_upload_button" id="'.$id.'_'.$order .'">Upload</span>';
        if(!empty($val['url'])) {$hide = '';} else { $hide = 'hide';}
        $slider .= '<span class="button image_reset_button '. $hide.'" id="reset_'. $id .'_'.$order .'" title="' . $id . '_'.$order .'">Remove</span>';
        $slider .='</div>' . "\n";
        $slider .= '<div class="screenshot">';
        if(!empty($val['url'])){
            $slider .= '<a class="pixy-uploaded-image" href="'. $val['url'] . '">';
            $slider .= '<img class="pixy-option-image" id="image_'.$id.'_'.$order .'" src="'.$val['url'].'" alt="" />';
            $slider .= '</a>';
            }
        $slider .= '</div>';




        $slider .= '<label>Slide Content</label>';
        $slider .= '<textarea class="slide pixy-input" name="'. $id .'['.$order.'][content]" id="'. $id .'_'.$order .'_slide_content" cols="8" rows="8">'.stripslashes($val['content']).'</textarea>';
        $slider .= '<a class="slide_delete_button" href="#">Delete</a>';
        $slider .= '<div class="clear"></div>' . "\n";
        $slider .= '</div>';
        $slider .= '</li>';

        return $slider;
    }
}// End Class

基本上，我认为应该在“var newSlide”中直接修复上传按钮:

<span class="button image_upload_button" id="' + sliderId + '_' + newNum + '">Upload</span>

如果您需要更多信息，请告诉我，我希望有人可以帮助我。 多谢。

Answer 1

不清楚你在这里做什么:

jQuery(document).ready(function($) {


//AJAX Upload
    $('.image_upload_button').each(function() {

看起来您在加载文档后立即开始上传。 假设代替 $('.image_upload_button').each 应该是 $('.image_upload_button').live('click', function(){ //upload code here })