Javascript上传按钮问题，适用于Wordpress

Question

I am working on a WordPress theme, with a theme options page that contains an infinite slides generator, each slide contains few fields and an upload button, to upload images to each slide. The problem is that the upload button doesn't work. As you can see the upload button has 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

When I generate the slide with "Add New Slide" button, class="slide_add_button", it is generated by jQuery (*see "var newSlide" above, and the upload button class="image_upload_button"), and if I save the options and I refresh the page it is regenerated py a PHP code that works.

The PHP code:

    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

Basically, I think the fix should be made in "var newSlide", directly to the upload button:

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

Please let me know if you need more infos, and I hope someone can help me. Thanks a lot.

Answer 1

It is not clear what are you doing here:

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


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

Looks like you are starting upload immediately after document is loaded. Suppose instead of $('.image_upload_button').each there should be $('.image_upload_button').live('click', function(){ //upload code here })