添加更多按钮在wordpress仪表板中不起作用

Question

我正在wordpress上的自定义帖子上工作，在这个自定义帖子中，我想使用wp_attachment添加许多照片，问题是我在这里单击时没有任何反应，就像wordpress忽略了我的jQuery文件我的代码一样

<div class="col-sm-9">
            <input type="file" name="aduploadfiles[]" id="uploadfiles2" size="35" class="form-control" />         
            <input type="button" id="add_more2" class="upload" value="add more photo"/>
</div>

这是使用javascript的即时消息

 var abc = 0; //Declaring and defining global increement variable

$(document).ready(function() {

//To add new input file field dynamically, on click of "Add More Files" button below function will be executed
    $('#add_more2').click(function() {
        $(this).before($("<div/>", {id: 'uploadfiles2'}).fadeIn('slow').append(
                $("<input/>", {name: 'aduploadfiles[]', type: 'file', id: 'aduploadfiles',size:'35', class:'form-control'})
                ));
    });

//following function will executes on change event of file input to select different file   
$('body').on('change', '#file', function(){
            if (this.files && this.files[0]) {
                 abc += 1; //increementing global variable by 1

                var z = abc - 1;
                var x = $(this).parent().find('#previewimg' + z).remove();
                $(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");

                var reader = new FileReader();
                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);

                $(this).hide();
                $("#abcd"+ abc).append($("<img/>", {id: 'img', src: 'x.png', alt: 'delete'}).click(function() {
                $(this).parent().parent().remove();
                }));
            }
        });

//To preview image     
    function imageIsLoaded(e) {
        $('#previewimg' + abc).attr('src', e.target.result);
    };

    $('#upload').click(function(e) {
        var name = $(":file").val();
        if (!name)
        {
            alert("First Image Must Be Selected");
            e.preventDefault();
        }
    });
});

当我在wordpress页面中尝试它时效果很好，但在仪表板中它甚至都无法加载，甚至也无法正常工作

Answer 1

有几个问题：

1. $不可用。 使用jQuery

在WordPress中，jQuery在兼容模式下运行，即$快捷方式不可用 。 您可以通过在ready方法中将jQuery捕获为函数参数来解决此问题，如下所示：

jQuery(document).ready(function($) {

然后， ready回调中的其余代码可以继续使用$ 。

2.文件上传输入元素的选择器错误

您在jQuery选择器中提到了错误的ID：您的文件上载元素具有ID uploadfiles2 ，而不是file 。 所以改变：

$('body').on('change', '#file', function(){

至：

$('body').on('change', '[name="aduploadfiles[]"]', function(){

3.重复的id值

每次添加新按钮时，都会创建一个id为uploadfiles2的div ：但是该ID已经存在。 在HTML中，id值必须唯一，否则会发生意外情况。

您动态创建的所有元素都应获得一个动态创建的（不同的）id值（或完全没有id）。