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

Question

我想在单击按钮时弹出一个带有联系表单的屏幕。 我的Javascript函数在单击时没有反应。

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

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

加载Javascript文件是可行的，加载时程序也会进入init函数。 但是永远不要单击功能。

contact.blade.php：

        <div class="o-grid">
            <div class="o-grid__col u-7/12@lg u-border--contact">
                <td><a href="#" class="c-btn c-btn--red c-btn--small contact-form-result .contact-form-result-modal"
                       data-location=""id="contact-provider-button"
                       data-detail-route="{{ route('vendor.contact', ['profile' => $profile],true) }}"
                       data-modal-open="contact-provider-form">@lang('profile.btnContact')</a></td>
            </div>
        </div>

JAVASCRIPT（contact-provider.js）：

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();

Answer 1

看来您引用的是类而不是ID。 更改

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

至

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

另外，正如@Pointy在评论中提到的，最好只在ready处理程序中引用DOM元素，否则您可能会遇到异常或意外行为。