javascript - jQuery 变量未在动态创建的文本框中更新

Question

我正在尝试检测当前按钮单击以将值分配给其各自的文本框。每次我选择任何按钮时，它都会检测到第一个按钮单击并将值分配给第一个文本框。也就是说，第二个和第三个按钮值被分配给第一个文本框。 upload_textbox 变量没有更改其值。

我做了一些错误测试，当upload_textbox变量进入custom_uploader.on('select', function()时，该值保持不变，不会改变。我不是确定为什么没有。

我在这里做错了什么？以下是我的代码:

function dynamic_image( button  ) 
{
    var custom_uploader;
    $(button).on('click','input.button',function(e)
    {
        e.preventDefault();
        var $clickedInput  = $(this);// JQuery Object of section2_2
        var clickedInputId = $clickedInput.attr('id'); // section2_2
        var upload_textbox = '#' + 'upload_image_' + clickedInputId;

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

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

dynamic_image('#TextBoxesGroup'); 

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>

脚本

<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);
    var newUploadDiv = $(document.createElement('div'))
     .attr("id", 'UploadDiv' + counter);

    newTextBoxDiv.after().html('<label>Title #'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="title_section2_' + counter + '" value="" >');

    newDescDiv.after().html('<label>Description #'+ counter + ' : </label>' +
      '<input type="text" name="descbox' + counter + 
      '" id="desc_section2_' + counter + '" value="" ><br></br>');

    newImageDiv.after().html('<input class="button" type="button" name="upload_s2_' + counter + 
      '" value="Upload Image" id="section2_' + counter + '"  >');

    newUploadDiv.after().html('<input type="text" name="image_url_' + counter + 
      '" id="upload_image_section2_' + counter + '"  >');


    newUploadDiv.appendTo("#TextBoxesGroup");
    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 += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
        }
        alert(msg);
    });
});

</script>

Answer 1

然后我怀疑这可能是罪魁祸首。

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

这总是会为您提供第一个 custom_uploader 对象的实例。尝试销毁前一个实例并生成新的实例。