Question

对于文件上传，我使用了WordPress插件。

在这里，我想控制最大文件上传数量。当用户上传最大数量的文件时，我可以禁用上传插件。
但是在禁用上载按钮后，当用户删除文件并想要上载新文件时，他不能。如何重新启用销毁上传按钮？我已禁用了上传按钮，并计入了输入类的总数。

jQuery(document).ready(function() {
    var limit = 3;
    jQuery('.qbutton').on('click', function() {
        if (jQuery(".mfcf7-zl-multifile-name").length == limit) {
            jQuery(this).attr("disabled", "disabled");
        }
    });
    jQuery('.mfcf7_zl_delete_file').on('click', function() {
        if (jQuery(".mfcf7-zl-multifile-name").length < limit) {
            jQuery('.qbutton').removeAttr("disabled");
        }
    });
});

更新：事件侦听器不适用于动态创建类 .mfcf7_zl_delete_file
删除附件后，不会触发单击事件。

Answer 1

我相信您只需要更新您的状况即可：

jQuery(document).on('click', '.mfcf7_zl_delete_file', function() {
    // do the following stuff after deleting the file
    if (jQuery(".mfcf7-zl-multifile-name").length < limit) {
        jQuery('.qbutton').removeAttr("disabled");
    }
});

Answer 2

我认为，您的点击事件未触发。还需要重新检查条件。

jQuery(document).on('click', 'mfcf7_zl_delete_file', function(){ 
     if (jQuery(".mfcf7-zl-multifile-name").length < limit) {
            jQuery('.qbutton').removeAttr("disabled");
        }
});

Answer 3

该元素尚不存在，您必须从dom选择器中添加侦听器试试这个

var $file = jQuery(".mfcf7-zl-multifile-name");
jQuery(document).on('click', $file, function(){
   if ($file.length < limit) {
        jQuery('.qbutton').removeAttr("disabled");
   }
})

您可以使用文档或任何父元素

Answer 4

由于document就绪时页面上不存在目标元素，因此在选择要上传的文件后创建的元素上没有附加事件。使用类似的

// $('container element').on('trigger name', 'dynamic target', function(e) {
    // do something
// });

jQuery('.mfcf7_zl_multifilecontainer').on('click', '.mfcf7_zl_delete_file', function(e) {
    if (jQuery(".mfcf7-zl-multifile-name").length >= limit) {
        jQuery('.qbutton').prop("disabled", false);
    }
});

这将捕获页面加载后添加到.mfcf7_zl_delete_file的任何.mfcf7_zl_multifilecontainer上的点击。

顺便说一句，请注意，我使用.prop()而不是使用attr()，请参阅我对您问题的评论以获取详细信息。

编辑：看起来像wordpress一样会动态添加元素。我对Wordpress的了解不多。试试这个：

jQuery(document).ready(function() {
    var limit = 3;
        jQuery(document).on('change', '.mfcf7_zl_multifilecontainer', function() {
        if(jQuery('body').find(".mfcf7-zl-multifile-name").length >= limit) {
            jQuery('body').find('.qbutton').attr("disabled", "disabled");
        } else {
            jQuery('body').find('.qbutton').removeAttr("disabled");
        }
    });
});

您可以使用肯定知道在页面加载时存在的元素（必须位于body到.qbutton的DOM路径中）来代替上述代码中的body

jQuery ReEnable禁用按钮

4 个答案: