Javascript 实施；加上“更多”；使用jQuery和媒体上传器在前端Wordpress页面上显示图像

我正在使用Wordpress创建一个前端表单，用户可以在其中上传图片。我实现了一个“添加更多”按钮，它创建了另一个输入字段。 但是，“添加”字段上的按钮链接（

选择图像

）不会触发媒体上载器窗口。但是，第一个按钮工作正常

这是我的密码

frontendform.php

..
<p class="text-box">
        <a class="add-box btn" href="#">Add More</a>
        <input type="text" size="36" name="image_1" value="http://" /> 
        <input id="image_1" class="button upload_image_button" type="button" value="Upload Image" />
</p>

addmore.js

jQuery(document).ready(function($){
    $('.item-submit .add-box').click(function(){
        var n = $('.text-box').length + 1;
        if( 8 < n ) {
            alert('Maximum number of images reached!');
            return false;
        }
        var box_html = $('<p class="text-box"><input type="text" size="36" name="image_' + n + '" value="http://" /><input id="image_' + n +'" class="button upload_image_button" type="button" value="Upload Image" /> <a href="#" class="remove-box">Remove</a></p>');
        box_html.hide();
        $('.item-submit p.text-box:last').after(box_html);
        box_html.fadeIn('slow');
        return false;
    });
    $('.item-submit').on('click', '.remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});

jQuery（文档）.ready（函数（$）{
$（'.item submit.add box'）。单击（函数（）{
var n=$（'.text box'）。长度+1；
if（8
'）；
box_html.hide（）；
$（'.item submit p.text-box:last'）。在（box_html）之后；
box_html.fadeIn（'slow'）；
返回false；
});
$（'.item submit'）。在（'单击'，'.remove box'，函数（）上{
$（this.parent（）.css（'background color'，'#FF6C6C'）；
$（this.parent（）.fadeOut（“slow”，function（））{
$（this.remove（）；
$（'.box number'）。每个（函数（索引）{
$（此）.text（索引+1）；
});
});
返回false；
});
});

所有

.js

脚本都已正确排队，我使用

var_dump（wp_print_scripts（））进行了检查

谢谢你的帮助
 根据Patrick Evans的建议，替换

$（'.upload_image_按钮'）。单击

与

$（文档）。在（'click'，'上。上传图像按钮'，函数（e）{..

做了这个把戏。
可能重复@Patrick Evans:链接的帖子如何帮助解决我的问题？阅读它，它会告诉你需要委派你的点击事件。因为你正在创建动态对象，除非你使用委派，否则你的点击事件将不会为你的新元素触发。
$（'.upload_image_button'））.click
应该类似于
$（文档）。在（'click'，'upload_image_button'，function（）{}）上
jQuery(document).ready(function($){
    $('.item-submit .add-box').click(function(){
        var n = $('.text-box').length + 1;
        if( 8 < n ) {
            alert('Maximum number of images reached!');
            return false;
        }
        var box_html = $('<p class="text-box"><input type="text" size="36" name="image_' + n + '" value="http://" /><input id="image_' + n +'" class="button upload_image_button" type="button" value="Upload Image" /> <a href="#" class="remove-box">Remove</a></p>');
        box_html.hide();
        $('.item-submit p.text-box:last').after(box_html);
        box_html.fadeIn('slow');
        return false;
    });
    $('.item-submit').on('click', '.remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});