Question

我正在使用此代码将图片源网址插入WordPress管理面板中的相关字段。这是我的表单HTML结构的一部分（重复该容器中的每个其他字段）： `

<table>
<tbody>
<tr valign="top">
    <th scope="row">
    Label for input field 1 :
    </th>
    <td>
    <input class="upload_button" type="button" value="Upload" />
    <input type="text" name="upload" class="upload-url" value="Empty"/>
    </td>
</tr>
<tr valign="top">
    <th scope="row">
    </th>
    <td class="upload-preview">
    <img src="Empty" alt="Preview" />
    </td>
</tr>
<tr valign="top">
    <th scope="row">
    Label for input field 2 :
    </th>
    <td>
    <input class="upload_button" type="button" value="Upload" />
    <input type="text" name="upload" class="upload-url" value="Empty"/>
    </td>
</tr>
<tr valign="top">
    <th scope="row">
    </th>
    <td class="upload-preview">
    <img src="Empty" alt="Preview" />
    </td>
</tr>
</tbody>
</table>

这是处理它的Javascript代码： `

var image_uploader;

jQuery("div#container").on('click', 'input.upload_button', function(e) {

    e.preventDefault();
    var formloc = jQuery(this).parent().parent();
    //If the uploader object has already been created, reopen the dialog
    if (image_uploader) {
        image_uploader.open();
        return;
    }

    //Extend the wp.media object
    image_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Use Image',
        button: {
            text: 'Use Image'
        },
        multiple: false
    });

    //When a file is selected, grab the URL and set it as the text field's value
    image_uploader.on('select', function() {
        attachment = image_uploader.state().get('selection').first().toJSON();
        jQuery(formloc).next('tr').find('img').attr('src', attachment.url);
        jQuery(formloc).find('input.upload-url').val(attachment.url);

    });

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

});

我正在使用此结构来保持表单整洁（上传图像的预览显示在输入字段下方）。当一个人上传图像时，应该将图像URL插入输入字段，以及img src以立即显示它。

然而，问题是这只适用于第一次点击，即当我点击上传按钮1时，它按预期工作，但当我点击上传按钮2时，更改仍将是反映在应该由上传按钮1控制的区域。似乎$（this）仅记录首次点击的按钮，之后再也不会改变。

我非常感谢你的帮助，看看那里出了什么问题。我一直在试探问题，但无济于事。如果您需要，我会准备好提供更多信息。

非常感谢你的帮助！

Answer 1

问题似乎是if(image_uploader)条件。我认为第二次单击使其立即返回并且on事件处理程序（您在最后一次点击时挂钩）执行时引用第一个单击的项目。

你应该尝试重构代码。

jQuery $（这个）没有选择新点击的按钮

1 个答案: