ブートストラップモーダル$（...）。モーダルは関数ではありません

Question

スパンをクリックするとブートストラップモーダルダイアログを開こうとしていますが、私は問題の解決策をインターネットで検索しましたブートストラップモーダル$（。 ..）。modalは関数ではありませんしかし、私が見つけた唯一の解決策は、 "bootstrapはjQueryに依存するので、ブートストラップスクリプトの前にjQueryスクリプトを置く"ことです。jQueryを先に入れました。 。

：モーダル$（...）ブートストラップ モーダルが機能

ではありませんここで私は、これまでに試したコードです

HTML

<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="myModal" data-target="#modal"></span> 


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Are you sure you want to delete this transaction?</h4> 
      </div> 
      <div class="modal-body"> 
       ... 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary" id="delete">Delete</button> 
      </div> 
     </div> 
    </div> 
</div> 

jQueryの

$(".spanRemoveTransaction").on('click', function (e) { 
    theTransactionId = $(this).attr("value"); 
    e.preventDefault(); 
    deleteTransactionModal(theTransactionId, e); 
}); 

function deleteTransactionModal(theTransactionId, e) { 
    e.preventDefault(); 
    $('#myModal').modal({ 
     keyboard: false 
    }).on('click', '#delete', function (e) { 
     var url = config.deploymentIp + "/Controller?deleteTransaction"; 
     var transactionId = ""; 
     $.ajax({ 
      dataType: "json", 
      type: "POST", 
      url: url, 
      data: {transactionId: theTransactionId}, 
      success: function (data, textStatus, jqXHR) 
      { 
       if (!data["has_errors"]) { 
        $('table#transactionList tr#'+theTransactionId).remove(); 
       } else { 
        transactionId = data.errors["transactionId"]; 

        if (transactionId === "transactionIdError") { 

        } 
       } 
      } 
     }); 
    }); 
} 

スクリプト

<script src="js/jquery/jquery.js" type="text/javascript"></script> 
    <script src="js/bootstrap.js" type="text/javascript"></script> 
    <script src="js/bootstrap-select.min.js" type="text/javascript"></script> 
    <script src="includes/selectpicker.js" type="text/javascript"></script> 
    <script src="js/currencyExchange.js" type="text/javascript"></script> 
    <script src="js/atbottom.js" type="text/javascript"></script> 
    <script src="js/config.js"></script> 
    <script src="includes/loadBottomScript.js" type="text/javascript"></script> 
    <script src="js/menuScript.js" type="text/javascript"></script> 
    <script src="js/bootstrap-datepicker.js" type="text/javascript"></script> 
    <script src="includes/datepicker.js" type="text/javascript"></script> 
    <script src="js/transfers.js" type="text/javascript"></script> 

誰もがこれに対する解決策を持っている、あるいは単に新鮮な目をしているために起こると助けることができる場合私はプロを見つけるblem、それは非常に高く評価されるでしょう。あなたがここjQuery.noCoflict

を使用している

Answer 1

は、それが動作するかどう教えてくださいjsFiddle

使用

jQuery.noConflict(); 
jQuery('#myModal') .... 

です。無紛争後の彼のコメントに別のものに@dashtinejadポイントとして

UPDATE

：$に依存しているスクリプトの

他の部分もjQueryに

Answer 2

$(document).ready(function() { 
 

 
    // Attach Button click event listener 
 
    $('.glyphicon-remove spanRemoveTransaction').click(function(){ 
 

 
     // show Modal 
 
     alert("pp") 
 
     $('#myModal').modal('show'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="modal" data-target="#myModal">click the span</span> 
 

 

 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
       <h4 class="modal-title" id="myModalLabel">Are you sure you want to delete this transaction?</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       ... 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       <button type="button" class="btn btn-primary" id="delete">Delete</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

を変更する必要があります