Question

我在编写JavaScript / Jquery时遇到了问题，因为我是新手。由于this关键字，我有一些相互破坏的功能。下面列出了所有正在破解的功能，最后一个是让我知道它是this关键字的原因：

// Functions that break
var gp;

gp = function() {
  var autocomplete, input, types;
  input = document.getElementById('loc-input');
  types = document.getElementById('type-selector');
  autocomplete = new google.maps.places.Autocomplete(input);
};

google.maps.event.addDomListener(window, 'load', gp);

$('a[href="' + this.location.pathname + '"]').parent('.navbar-nav li').addClass('active');

$('ul.nav li.dropdown, .dropdown-hover').hover((function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn();
}), function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut();
});

$('.form-control').mousedown(function() {
  if (!$(this).is(':focus')) {
    return;
  }
  $(this).blur().focus();
});

$('#new_item').dropzone({
  acceptedFiles: '.jpeg, .jpg, .png',
  // Area that causes functions to break
  init: function() {
    var myDropzone;
    myDropzone = this;
    this.element.querySelector('button[type=submit]').addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });
    this.on('sendingmultiple', function() {});
    this.on('successmultiple', function(files, response) {});
    this.on('errormultiple', function(files, response) {});
  }
});

这个区域就在这里（内部函数），如果注释掉，那么所有的JavaScript都会再次运行，但是如果使用的话，一切都会丢失：

  init: function() {
    var myDropzone;
    myDropzone = this;
    this.element.querySelector('button[type=submit]').addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      myDropzone.processQueue();
    });
    this.on('sendingmultiple', function() {});
    this.on('successmultiple', function(files, response) {});
    this.on('errormultiple', function(files, response) {});
  }

因此，我试图了解如何让所有这些功能正常运行，或者不使用this关键字并仍然自我引用？

修改

使用Chrome扩展程序：Javascript错误通知程序。我能够看到错误说：

TypeError: Cannot read property 'addEventListener' of null

我在这里提出了返回JavaScript的要点：

https://gist.github.com/justintech/d6d5bdb8468b79f60663

编辑2 - 表格

<div class="row">
  <div class="col-lg-8 col-lg-offset-2">
    <form data-validate="true" class="form-horizontal form" id="new_item" enctype="multipart/form-data" action="/items" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="/pbJ8IQK+ybIrjXFD7t2MIWzzFKsvmF7DA9oKSnNxouMk6i+jLNsboDZELHM5+w2qEnE0qzBEXyNFGl7HB85kQ==">
      <fieldset>
        </div>
          <main id="image-preview" class="dz-clickable">
          </main>
          <div class="submit-section">
          <div class="col-lg-12 col-md-12">
            <input type="submit" name="commit" value="Done" id="item-submit" class="btn btn-primary btn-lg btn-block">
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</div>

Answer 1

使用此

document.querySelector('#item-submit')

而不是这个

this.element.querySelector('button[type=submit]')

将解决您所看到的问题。这对你有用吗？

由于此关键字，Javascript init函数会中断？

1 个答案: