Question

我已经阅读了很多关于同样事情的话题，但没有一个真正帮助过我。

这是我的身体代码：

<div class='row'>
    <div class='main'>
        <div class='header'></div>
        <div class='image'>
            Pick image
        </div>
        <div style='clear: both'></div>
    </div>
</div>
<input type="file" id="file">

在我的jQuery中（这可行）：

$(".image").click(function(){
    $("#file").click();
});

但正如预期的那样，这只适用于第一次.image点击。如果我克隆.main，则.image上的点击事件将不再有效。所以，要解决这个问题，我需要实现$(document)，这就是我所做的。

$(document).on('click', $(".image"), function(event){
    $("#file").click();
});

虽然这段代码不起作用，但会检索错误：

未捕获RangeError：超出最大调用堆栈大小

goolge周围的一些搜索告诉我在event.stopPropagation();之后使用.click()，但它也不起作用。

Answer 1

尝试更改行：

$(document).on('click', $(".image"), function(event){
    $("#file").click();
});

要：

$(document).on('click', '.image', function(event) {
    $("#file").click();
});

Answer 2

尝试这样的事情]

从此

更改您的代码

$(".image").click(function(){
    $("#file").click();
});

TO

   $(document).on('click','.image',function(){
        $("#file").click();
    });

Answer 3

您的语法不正确，应该是：

$(document).on('click', ".image", function(event){
    $("#file").click();
});

最大调用堆栈大小超出此范围

3 个答案: