40886


test.jsの「.on('show.bs.modal', function (e)」箇所で以下のようなエラーが出ており、  
モーダルは表示されるのですが、モーダルのタイトルが書き換わりません…。  
onの使い方、bootstrapのモーダルの書き方がおかしいのでしょうか？

[code]

    test.js:2 Uncaught TypeError: $(...).on is not a function
        at HTMLDocument.<anonymous> (VM31857 test.js:2)
        at Function.<anonymous> (VM31855 jquery.min.js:19)
        at Function.each (VM31855 jquery.min.js:12)
        at Function.ready (VM31855 jquery.min.js:19)
        at HTMLDocument.<anonymous> (VM31855 jquery.min.js:19)
    
[/code]

●test.js

[code]

    $(function () {
    
      $("#testModal").on('show.bs.modal', function (e) {
        setTimeout(function(){
        var button = $(event.relatedTarget);
        var recipient = button.data("name");
        var modal = $(this);
        modal.find(".modal-title").text(recipient);
        }, 300);                        
      });
    
    });
    
[/code]

●index.html

[code]

    ～
    <button type="button" class="btn btn-default" data-toggle="modal" data-name="test" data-target="#testModal">表示</button>
    ～
        <div class="modal" style="z-index: 1500" id="testModal" 
             tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-show="true" data-keyboard="false" data-backdrop="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                  <span aria-hidden="true">&#215;</span><span class="sr-only">閉じる</span>
                </button>
                <h4 class="modal-title">タイトル</h4>
              </div><!-- /modal-header -->
              <div class="modal-body">
                <p class="recipient">内容</p>
              </div>
            </div> <!-- /.modal-content -->
          </div> <!-- /.modal-dialog -->
        </div> <!-- /.modal -->
    
    ～
    
[/code]


CC BY-SA 3.0
2018-01-11T09:49:11.887
40885
2018-01-11T10:23:57.933
2018-01-11T10:20:51.863
3371
12842
question
javascript jquery bootstrap
Uncaught TypeError: $(...).on is not a functionが出てしまう


`test.js`のfunctionにはミスがありましたが、それ以外は問題ないと思います。

下記のスニペットを実行して確認してください。

[code]

    $(function() {
      $("#testModal").on('show.bs.modal', function(e) {
        setTimeout(function() {
          var modal = $(e.target);
          var button = $(e.relatedTarget);
          var recipient = button.data("name");
          modal.find(".modal-title").text(recipient);
        }, 300);
      });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
    <button type="button" class="btn btn-default" data-toggle="modal" data-name="test" data-target="#testModal">表示</button>
    <div class="modal" style="z-index: 1500" id="testModal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true" data-show="true" data-keyboard="false" data-backdrop="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                  <span aria-hidden="true">&#215;</span><span class="sr-only">閉じる</span>
                </button>
            <h4 class="modal-title">タイトル</h4>
          </div>
          <div class="modal-body">
            <p class="recipient">内容</p>
          </div>
        </div>
      </div>
    </div>
[/code]


CC BY-SA 3.0
2018-01-11T10:03:13.773
40886
2018-01-11T10:23:57.933
2018-01-11T10:23:57.933
3371
3371
40885
answer