javascript - 未捕获的 TypeError : $(. ..).leanModal 不是 HTMLDocument 中的函数。<匿名>

Question

我正在使用 Materialise css 库和 laravel 创建一个调查应用程序: 这是我的 html 代码:

<div id="doDelete" class="modal bottom-sheet">
        <div class="modal-content">
          <div class="container">
            <div class="row">
              <h4>Are you sure?</h4>
              <p>Do you wish to delete this survey called "{{ $survey->title }}"?</p>
              <div class="modal-footer">
                <a href="/survey/{{ $survey->id }}/delete" class=" modal-action waves-effect waves-light btn-flat red-text">Yep yep!</a>
                <a class=" modal-action modal-close waves-effect waves-light green white-text btn">No, stop!</a>
              </div>
            </div>
          </div>
        </div>
      </div>

和 init.js 代码:

$(document).ready(function() {
  $('.collapsible').collapsible({
    accordion: false
  });

 $('.modal-trigger').leanModal();

  $(document).on('click', '.delete-option', function() {
    $(this).parent(".input-field").remove();
  });

但是我在尝试执行删除功能时出现这个错误

init.js:6 Uncaught TypeError: $(...).leanModal is not a function
    at HTMLDocument.<anonymous> (init.js:6)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.I (jquery.min.js:2)

我还包括 init.js 和 jquery.min.js

 <script src="{{ URL::asset('jquery.min.js') }}"></script>
    {!! MaterializeCSS::include_js() !!}
    <script src="{{ URL::asset('init.js') }}"></script>

请帮忙!!谢谢。

Answer 1

               <section class="new">
                    <center><h2 class="text center">RECENT-PROJECT</h2></center>
                    <div id="carousel">
                            <img src="carousel 11.jpg" id="item-11"/>
                            <img src=" carousel image4.jpg" id="item-4"/>
                            <img src="image8.jpg" id="item-8"/>
                            <img src="image9.jpg" id="item-9"/>
                             <img src="image13.jpg" id="item-13"/>
                             <img src="image15.jpg" id="item-15"/>
                             <img src="images 12.jpg" id="item-12"/>
                             <img src="images 14.jpg" id="item-14"/>
                             <img src="image16.jpg" id="item-9"/>
                        </div>

                        <script>
                                $(document).ready(function () {
                                  var carousel = $("#carousel").waterwheelCarousel({
                                    flankingItems: 3,
                                  });

                                  $('#prev').bind('click', function () {
                                    carousel.prev();
                                    return false
                                  });

                                  $('#next').bind('click', function () {
                                    carousel.next();
                                    return false;
                                  });
                                });
                            </script>
                    </section>