doulei3488 2014-09-26 02:13
浏览 50
已采纳

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

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>
  • 写回答

1条回答 默认 最新

  • doujiu6976 2014-09-26 02:36
    关注

    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
    
    })
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 (标签-STM32|关键词-智能小车)
  • ¥20 关于#stm32#的问题,请各位专家解答!
  • ¥15 (标签-python)
  • ¥15 第一个已完成,求第二个做法
  • ¥20 搭建awx,试了很多版本都有错
  • ¥15 java corba的客户端该如何指定使用本地某个固定IP去连接服务端?
  • ¥15 activiti工作流问题,求解答
  • ¥15 有人写过RPA后台管理系统么?
  • ¥15 Bioage计算生物学年龄
  • ¥20 如何将FPGA Alveo U50恢复原来出厂设置哇?