从单击的按钮运行外部javascript函数，该按钮是使用Wordpress中的jquery动态创建的

Question

I am trying to execute the function that was created separately called uploads.js . This javascript file is a custom image uploader function to be used in Wordpress. I was able to run that javascript file whenever i create a new button just by the of the HTML by sending the needed parameters.

There is a part where i created a dynamic button creation function using jquery, where whenever a 'PLUS' sign button is pressed, that function will trigger and a new button is added. The id of that button is automatically incremented by one.

The problem here is, whenever i click on the button that was created not by using the dynamic button function, it was able to execute the uploads.js function. But the dynamic created buttons are not able to. It seems like the id of the dynamic button was not detected. I even inspect the element of that page, the id that was sent is exactly the same from what I have sent as a parameter to the uploads.js function.

Is there something that i have missed or I have done wrong? Below are the codes:

HTML

<tr class="form-field">
     <th scope="row">
         <label for="component1"> Component 1</label>
         <br></br>
         <input type='button'  class="button button-large" value='+' id='addButton'>
         <input type='button'  class="button button-large" value='-' id='removeButton'>
         <input type='button'  class="button button-large" value='Get TextBox Value' id='getButtonValue'>
     </th>

     <td>
         <div id='TextBoxesGroup'>
             <div id="ImageDiv1">
                 <input id="section2_1" class="button" type="button" value="Upload Image" name="upload_s2_1"/>
             </div>
             <div id="TextBoxDiv1">
                 <label>Title #1 : </label>
                 <input type='text' id='title1' />
             </div>
             <div id="DescDiv1">
                 <label>Description #1 : </label>
                 <input type='text' id='description1' /><br></br>
             </div>
         </div>
     </td>
</tr>

uploads.js

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

    function dynamic_image( button , textbox ) 
    {
        var custom_uploader;


        $(button).click(function(e) {

            e.preventDefault();

            //If the uploader object has already been created, reopen the dialog
            if (custom_uploader) {
                custom_uploader.open();
                return;
            }

            //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();
                $(textbox).val(attachment.url);
            });

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

        });
    }

    dynamic_image('#upload_image_button' , '#upload_image');
    dynamic_image('#section2_1' , '#section2_text1'); 
    dynamic_image('#section2_2' , '#section2_text2'); 
    dynamic_image('#section2_3' , '#section2_text3'); 
    dynamic_image('#section2_4' , '#section2_text4'); 
    dynamic_image('#section2_5' , '#section2_text5'); 
});

script

<script type="text/javascript">
    $(document).ready(function(){
        var counter = 2;
        $("#addButton").click(function () {
            if(counter>5){
                alert("Only 5 components are allowed");
                return false;
            }
            var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);
            var newDescDiv = $(document.createElement('div'))
     .attr("id", 'DescDiv' + counter);
            var newImageDiv = $(document.createElement('div'))
     .attr("id", 'ImageDiv' + counter);

            newTextBoxDiv.after().html('<label>Title #'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="title' + counter + '" value="" >');
            newDescDiv.after().html('<label>Description #'+ counter + ' : </label>' +
      '<input type="text" name="descbox' + counter + 
      '" id="desc' + counter + '" value="" ><br></br>');
            newImageDiv.after().html('<input class="button" type="button" name="upload_s2_' + counter + 
      '" value="Upload Image" id="section2_' + counter + '"  >');

            newImageDiv.appendTo("#TextBoxesGroup");
            newTextBoxDiv.appendTo("#TextBoxesGroup");
            newDescDiv.appendTo("#TextBoxesGroup");

            counter++;
        });
        $("#removeButton").click(function () {
            if(counter==1){
                alert("No more component to remove");
                return false;
            }
            counter--;

            $("#TextBoxDiv" + counter).remove();
            $("#DescDiv" + counter).remove();
            $("#ImageDiv" + counter).remove();

         });

         $("#getButtonValue").click(function () {
             var msg = '';
             for(i=1; i<counter; i++){
                 msg += "
 Textbox #" + i + " : " + $('#textbox' + i).val();
             }
             alert(msg);
         });
     });

</script>

Answer 1

Other button(like #section2_2, #section2_3 ...) maybe not exist, When function dynamic_image run. Then below code cannot have meaning.

dynamic_image('#section2_2' , '#section2_text2'); 
// cannot find #section2_2 , because not yet added

Try this.

// function is called when input.button(like #section2_1, #section2_2 ...) on #TextBoxesGroup clicked 
$('#TextBoxesGroup').on('click','input.button',function(e){

    e.preventDefault();

    //If the uploader object has already been created, reopen the dialog
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }

    //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();
        $(textbox).val(attachment.url);
    });

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

})

See example

indicate actually like following

$('#TextBoxesGroup').on('click','input.button',function(e){

    var $clickedInput  = $(this);// JQuery Object of section2_2

    var clickedInputId = $clickedInput.attr('id'); // section2_2
    var indicateKey = clickedInputId.substring(10,clickedInputId.length);// 2 

    var neededTextId = 'section2_text'+indicateKey ; //section2_text2
    var $neededText = $("#" +neededTextId ); // JQuery Object of section2_text2

    // run logic what you want to do

})