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

Question

我正在尝试将图像放在＆＃39; frame_inner＆＃39;但是当我尝试上传图片时，我得到了错误，我无法弄清楚它有什么问题..

div称为＃frame; frame__inner＆＃39;已经可以点击，但每次我点击错误弹出

HTML：

<div id="storyboard">
      <div class="frame">  
        <div class="frame__outer"> 
          <div class="frame__inner">
            <div class="uploader" onclick="$('#filePhoto').click()">
               <img src=""/>
               <input type="file" name="userprofile_picture"  id="filePhoto" />
            </div>
            </div>
          <div class="upper__content">
           <button class="settings"></button>
            <div class="icon-bar">
             <a href="#" class="close_btn" onclick="closeNav()">&times;</a>
            <a href="#" class="add__btn"> <div class="add__image"></div> </a>
               <a href="#" class="remove__btn"> <div class="remove__image"></div> </a>
          </div> 
           <button class="trash"></button>
            <div class="number">1</div> 
          </div>
           <div class="frame_content">
            <div class="mic"></div>

             <div class="frame__titel">
               <span><textarea placeholder="Voice-over:" id="text" rows="2" ></textarea></span>
              </div>
              <form>
                <div class="frame__tekst">
                  <div class="run"></div>
                  <p>
                  <textarea rows="10" cols="45" placeholder="Animatie:"></textarea>
                  </p>
                  </div>
              </form>
            </div>
          </div>
        </div>
        <div class="frame">
            <!--   <div type="button" class="remove__button"> - </div> -->
       <div type="button" class="add__button"> 
         <div class="btn__wrapper"> + Nieuwe frame</div>
  </div>
  </div>
  </div>

使用Javascript：

$(function() {
    'use strict';
    /* global Modernizr:true, fullpage:true, parseInt:true */
    var _this = this,
        _body = $('body'),
        _win = $(window),
        _doc = $(document),
        btn = $('#btn');



    _this.addClickFunction = function() {
            var i = 1;

            _doc.on('click', '.settings', function() {});
            _doc.on('click', '.close_btn', function() {});
            _doc.on('click', '.add__button', function() {
                (i++);
                $('#storyboard .frame').last().before($('<div class="frame"> ' + '<div class="frame__outer"> ' + '<div class="frame__inner">' + '<div class="uploader" onclick="$("#filePhoto").click()">' + '<img src=""/>' + '<input type="file" name="userprofile_picture"  id="filePhoto" />' + '</div>' + '</div>' + '<div class="upper__content">' + '<div class="settings"></div>' + '<div class="icon-bar">' + '<a href="#" class="close_btn" onclick="closeNav()">&times;</a>' + '<a href="#" class="add__btn"> <div class="add__image"></div> </a>' + '<a href="#" class="remove__btn"> <div class="remove__image"></div> </a>' + '</div>' + '<button class="trash"></button>' + '<div class="number">' + i + '</div>' + '</div>' + '<div class="frame_content">' + '<div class="mic"></div>' + '<div class="frame__titel">' + '<span><textarea placeholder="Voice-over:" id="text" rows="2" ></textarea></span>' + '</div>' + '<form>' + '<div class="frame__tekst">' + '<div class="run"></div>' + '<p>' + '<textarea rows="10" cols="45" placeholder="Animatie:"></textarea>' + '</p>' + '</div>' + '</form>' + '</div>' + '</div>' + '</div>'));
            });
        };

        _this.handleImage = function(e) {
            var reader = new FileReader();

            reader.onload = function(event) {
                $('.uploader img').attr('src', event.target.result);
            };
            reader.readAsDataURL(e.target.files[0]);
        };