0

I'm using Wordpress and am creating a frontend form where users can upload pictures. I have implemented an "Add More" Button, which creates another input field. enter image description here However, the Button Link (Select Image) on the "added" fields does not trigger the Media Uploader window. The first button works fine, however.

Here's my code

frontend-form.php

..
<p class="text-box">
        <a class="add-box btn" href="#">Add More</a>
        <input type="text" size="36" name="image_1" value="http://" /> 
        <input id="image_1" class="button upload_image_button" type="button" value="Upload Image" />
</p>

media-upload.js 

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

    var custom_uploader;

    $('.upload_image_button').click(function(e) {
    var target_input = $(this).attr('id');

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog


        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
    attachment = custom_uploader.state().get('selection').first().toJSON();
    $('input[name=' + target_input + ']').val(attachment.url);
});

        //Open the uploader dialog
        custom_uploader.open();

    });


});

addmore.js

jQuery(document).ready(function($){
    $('.item-submit .add-box').click(function(){
        var n = $('.text-box').length + 1;
        if( 8 < n ) {
            alert('Maximum number of images reached!');
            return false;
        }
        var box_html = $('<p class="text-box"><input type="text" size="36" name="image_' + n + '" value="http://" /><input id="image_' + n +'" class="button upload_image_button" type="button" value="Upload Image" /> <a href="#" class="remove-box">Remove</a></p>');
        box_html.hide();
        $('.item-submit p.text-box:last').after(box_html);
        box_html.fadeIn('slow');
        return false;
    });
    $('.item-submit').on('click', '.remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});

All .js scripts are properly enqueued, which I checked using var_dump(wp_print_scripts());

Thank you for your help!

yumba
  • 1,056
  • 2
  • 16
  • 31
  • possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Patrick Evans Apr 20 '14 at 18:26
  • @Patrick Evans: how could the linked post help solve my problem? – yumba Apr 20 '14 at 18:44
  • 1
    Read it, it shows you that you need to delegate your click event. Since you are creating dynamic objects unless you use delegation your click event will not be triggered for your new elements. `$('.upload_image_button').click` should be something like `$(document).on('click','.upload_image_button',function(){})` – Patrick Evans Apr 20 '14 at 18:47

1 Answers1

0

As suggested by Patrick Evans, replacing

$('.upload_image_button').click

with

$(document).on('click','.upload_image_button',function(e){..

did the trick.

yumba
  • 1,056
  • 2
  • 16
  • 31