javascript - Why loop formed after click on div? - Stack Overflow

admin管理员组

文章数量:1426066

I have styled file input:

<div class="fakeFileContainer">
 <div class="fakeFile">Dołącz brief</div>
 <input id="file" type="file" name="file"/>
</div>

for this part of code I have some line of js:

var fileInput = $('#contact #file')

fileInput.change(function(){
    $this = $(this);
    $('#contact form .fakeFile').text($this.val());
})

$('#contact form .fakeFileContainer').on('click', function () {
    fileInput.click(); //looping here
}).show();

After click on .fakeFileContainer I've got this error msg in console:

Uncaught RangeError: Maximum call stack size exceeded

It's caused by loop, but I don't know why this loop formed here. Can eone explain me reason of this situation?

---

P.S. Please excuse any spelling or grammatical mistakes, English isn't my first language

I have styled file input:

<div class="fakeFileContainer">
 <div class="fakeFile">Dołącz brief</div>
 <input id="file" type="file" name="file"/>
</div>

for this part of code I have some line of js:

var fileInput = $('#contact #file')

fileInput.change(function(){
    $this = $(this);
    $('#contact form .fakeFile').text($this.val());
})

$('#contact form .fakeFileContainer').on('click', function () {
    fileInput.click(); //looping here
}).show();

After click on .fakeFileContainer I've got this error msg in console:

Uncaught RangeError: Maximum call stack size exceeded

It's caused by loop, but I don't know why this loop formed here. Can eone explain me reason of this situation?

---

P.S. Please excuse any spelling or grammatical mistakes, English isn't my first language

• javascript
• jquery
• html
• click

Share Improve this question Follow edited Feb 20, 2013 at 18:39 Matt Busche 14.3k55 gold badges3838 silver badges6363 bronze badges asked Feb 20, 2013 at 18:37 WooCaShWooCaSh 5,21255 gold badges3838 silver badges5555 bronze badges 3

• 1 Both are right bellow you just keep clicking a click to a click! What do you want your click to do? – Iron3eagle Commented Feb 20, 2013 at 18:43
• You should never need two IDs in one selector: $('#contact #file'). IDs should be unique, so you only need $('#file'). – Jeff B Commented Feb 20, 2013 at 18:56
• @JeffB Ok I will remember that. – WooCaSh Commented Feb 20, 2013 at 18:57

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Your clicks on fileInput are handled by that function too (because the even bubbles up to the container). So the code says: "when clicked, trigger another click event". That second click event causes the same question to be asked again, and the answer is, again, to fire another click event. Thus, an infinite loop.

The triggered click event bubbles up, and you catch it right on the parent element to trigger the next click - creating an infinite loop. To prevent this, you can either

• stopPropagation of click events on the input
• do not trigger clicks if the handled event was issued on the input (by checking the srcElement)
• or put the click handler on the .fakeFile div instead of the surrounding container.

The click event on the fileInput is causing the event to bubble up to the .fakeFileContainer. Change your click event to not bubble:

$('#contact form .fakeFileContainer').on('click', function (e) {
    e.stopPropagation();
    fileInput.click();
}).show();

Some sort of bination of that should keep it from looping up to the .fakeFileContainer.

     $("#fakeFileContainer").on('click', function (e) {

        e.stopPropagation();
        console.log(e);

        $("#file")[0].click();

    });

chnage class "fakeFileContainer" to id "fakeFileContainer" and put $("#file")[0].click(); it's work for me .

本文标签： javascriptWhy loop formed after click on divStack Overflow