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对象的实例。尝试销毁先前的实例并生成新的实例。

Answer 2

dynamic_image 方法中的事件绑定可能存在问题。

尝试

$(button).live('click',function(e) (deprecated as of jQuery 1.7 though)

或

$( document ).on( 'click', button, data, function(e)

而不是

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

我希望它有所帮助。

Answer 3

你能试试吗？

$(button).change(function(){
//Write code  here
});

Answer 4

我已经解决了我的问题。这背后的罪魁祸首是@Aman提到的custom_uploader。那里有一个return语句，它使函数不采用已被替换的新值。执行此操作后，custom_uploader将打开两次，因为它有两个调用它的语句。把它变成if else语句并按照我想要的方式进行。以下是我更新的代码。

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


        //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);

        });

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

    })
}

@Aman，你提到了优化它。目前似乎很快。也许如果有一种方法可以更好地优化它，那将是一个很大的帮助。

谢谢大家，@ Regent，@ Aman，@ Bhushan Kawadkar，@ Arindam Nayak，@ Raj

jQuery变量未在动态创建的文本框上更新

4 个答案: