Question

我的表格见下文

<div id="upload_image_sets">
  <div id="clonedInput1" class="clonedInput">
    <input type="text" id="upload_image_link_1" class="image" size="36" name="hero_options[upload_image_link_1]" value="' . $hero_options['upload_image_link_1'] . '" />
    <input id="show_upload_image_link_button_1" class="button upload_images" type="button" value="Upload Image" />
    <div class="actions">
      <button class="clone">Clone</button> 
      <button class="remove">Remove</button>
    </div>
  </div>
</div>

当你单击克隆时，它会添加另一个表单，并且每个表单中的1个增量，当你点击上传图片按钮时，它会带你到一个wordpress媒体上传器，在那里你选择一个图像并且它已经过了输入中的url id upload_image_link_1

这只是1输入时工作正常，但随着表单添加更多字段，我需要选择与上传图片按钮匹配的输入

这是jquery

var custom_uploader;
$('.upload_images').click(function(e) {
    var ter = $(this).siblings('input').attr('id');
    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();
    $('#upload_image_link_1').val(attachment.url);
    alert (this);

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

我遇到问题的路线是

$('#upload_image_link_1').val(attachment.url);

我只是不知道该尝试什么

Answer 1

对于任何动态生成的元素，您需要使用.on而不是.click。更精确地.on用于委派事件。

官方Jquery网站上的文章：

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用.on（）时页面上。要确保元素存在且可以选择，请在文档就绪处理程序中为HTML中的元素执行事件绑定页面上的标记。如果将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序。或者，使用委派事件来附加事件处理程序。

委派事件的优势在于，它们可以处理来自稍后添加到文档中的后代元素的事件。

此示例将处理程序附加到1,000个元素：

  $( "#dataTable tbody tr" ).on( "click", function() {
       alert( $( this ).text() );
  });

委托事件方法只将一个事件处理程序附加到一个元素tbody，而事件只需要冒出一个级别（从点击的tr到tbody）：

  $( "#dataTable tbody" ).on( "click", "tr", function() {
       alert( $( this ).text() );
  });

<强> REF：

http://api.jquery.com/on/

快乐编码：）

Answer 2

更改

$('#upload_image_link_1').val(attachment.url);

到

$('#'+ter).val(attachment.url);

添加

var ter = $(this).siblings('input').attr('id');

行

以上

custom_uploader.on('select', function() {

现在可以使用

Answer 3

目标输入是点击上传按钮的上一个兄弟，请尝试

var custom_uploader;
$('.upload_images').click(function (e) {
    var ter = $(this).siblings('input').attr('id'),
        //the clicked button reference is stored here
        $this = $(this);
    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();
        //the target input is the previous sibling of the clicked upload button
        $this.prev().val(attachment.url);
        alert(this);

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

用查询选择最近的输入

3 个答案: