我试图做到这一点,当您单击特定的 div 时,它会触发一个输入按钮来打开 uploadcare 小部件。
这是有问题的 HTML
<div class="col-md-6 image-preview-single">
<img src="" alt="" class="img-responsive card-shadow hidden">
<div id="logo-upload" class="add-new-short add-new-home-realtor card-shadow-mini btn-file uploader-homicity" style="display:block;text-decoration:none; cursor: pointer;">
<i class="fa fa-photo"/>
<input type="hidden" role="uploadcare-uploader" name="logo" data-upload-url-base="" data-images-only="true" data-crop="150x150" data-clearable="true" id="logo-input">
<div class="uploadcare-widget uploadcare-widget-option-clearable uploadcare-widget-status-ready" data-status="ready">
<div class="uploadcare-widget-dragndrop-area">
Drop a file here
</div>
<div class="uploadcare-widget-status uploadcare-widget-circle uploadcare-widget-circle--canvas">
<canvas width="56" height="56"/>
</div>
<div class="uploadcare-widget-text">
</div>
<div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-open">Choose an image</div>
<div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-cancel">Cancel</div>
<div tabindex="0" role="button" class="uploadcare-widget-button uploadcare-widget-button-remove">Remove</div>
</div>
</div>
还有相关的 Jquery
$( '#logo-upload' ).on( 'click', function() {
$('input#logo-input').click();
});
这是控制台错误
Uncaught RangeError: Maximum call stack size exceeded
at RegExp.exec (<anonymous>)
at n.fn.init (jquery.min.js:2)
at n (jquery.min.js:2)
at HTMLDivElement.<anonymous> (uploadcare.js:72)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:4)
at HTMLInputElement.<anonymous> (jquery.min.js:4)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
我错过了什么?
谢谢
最佳答案
您还需要在输入点击时添加此事件:
$('input#logo-input').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
...your code
});
您需要stop propagation因为你创建了无限循环。
当您触发点击输入时,此输入位于 logo-upload
div 内,点击输入将传播到此容器,这会创建无限循环。
关于javascript - 单击 div 上的任意位置以触发输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44289675/