Javascript不响应点击事件[Laravel 5.5]

我想在点击按钮时弹出一个带有联系方式的屏幕。我的Javascript函数不会对单击做出反应

我在导入cantact.blade的主html页面中导入JS文件

  <script type="text/javascript" src="{{ URL::asset('js/provider/contact-provider.js') }}"></script>

---

似乎您引用的是一个类而不是id。更改

_$container = $('.contact-provider-button');

到

---

此外，正如@Pointy在注释中提到的，最好只在ready处理程序中引用DOM元素，否则可能会出现异常或意外行为。

如果JavaScript加载在HTML的顶部，容器元素将不会是DOM的一部分，因此

.on（）将

jQuery调用不会做任何事情。@Pointy它只需要在contact.blade.phpse中单击按钮时做一些事情。请参见如果将

\u$container

和

\u$modal

的初始化移到“ready”处理程序函数内部会发生什么情况。@Pointy，我将初始化移到init函数中，但这并没有做任何事情（也删除了我的缓存历史记录），没有进入

\u init

函数，没有进入传递给

$（）

的函数，即调用

\u$container.on（）

的匿名函数。这是正确的，但另外，初始化应该移到“ready”处理程序中。@Pointy why？：）因为如果不是，并且

元素还不是DOM的一部分，那么代码将无法工作。为什么您不想至少尝试一下呢？那么，如果按钮未渲染，它将无法工作？不过没关系，您还需要在HTML中修复类名-类名不应以“.”开头

var ExtendedForm = ExtendedForm || {};

/**
 * Show search form modal with detailed info
 * @type {{init}}
 */
ExtendedForm.showSearchDetail = (function ($) {

  var _$container;
  var _$modal;

  var _clearAndShow = function () {
    $('.modal-content', _$modal).html('');
    _$modal.css({display: 'block'});
  };

  var _getContent = function (url) {
    $.get(url, function (res) {
      $('.modal-content', _$modal).html(res);
    });
  };

  /**
   * DOM ready inits
   * @private
   */
  var _init = function () {

    _$container = $('.contact-provider-button');
    _$modal = $('#contact-provider-form');

    $(function () {

      // click search result
      _$container.on('click', '.contact-form-result-modal', function (evt) {
        alert("message");
        evt.preventDefault();
        var url = $(this).data('detail-route');
        $('body').addClass('u-overflow--hidden u-relative');
        _clearAndShow();
        _getContent(url);
      });

    });

  };

  return {
    init: _init
  }

})(jQuery);

ExtendedForm.showSearchDetail.init();

_$container = $('.contact-provider-button');

_$container = $('#contact-provider-button');