また、いくつかの追加コードを実行するためにモーダルコードが必要です

Question

モーダルウィンドウはうまく動作しますが、オープニング時にはいくつかの追加コマンドを実行したいと思います。私のjavascriptを見ると、トップの近くに、実行しようとしているものを表す「警告」コードが表示されます。モーダルウィンドウを開いた後、この追加のコマンドを実行するにはどうすればよいですか？ありがとうございました。

HTML

<div class="bs-example"> 
    <!-- Button HTML (to Trigger Modal) --> 
    <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">One Minute Meditation Video</a> 

    <!-- Modal HTML --> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title">YouTube Video</h4> 
       </div> 
       <div class="modal-body"> 
        <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/F6eFFCi12v8" frameborder="0" allowfullscreen></iframe> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>  
</div> 

JS

<script> 

    $(document).ready(function(){ 
     <!--We have to pull the global variables from localStorage--> 
     var name = localStorage.getItem('name'); 
     var email = localStorage.getItem('email'); 
     var act1 = "the Mindfulness page"; 
     //start the 'launched' function 
     launched(email, name, act1); 
    }); 


    $("#myModal").on("show", function() { 
     alert("Hey"); 
    }); 



    //Sending the 'launched' statement 
function launched(actorEmail, actorName, activ) { 
      var stmt = new ADL.XAPIStatement(
       new ADL.XAPIStatement.Agent('mailto:' + actorEmail, actorName), 
       new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/launched', 'launched'), 
       new ADL.XAPIStatement.Activity('act:http://example.com/2016/06/resiliency.html', activ, 
        'Clicked to move to a page in the resiliency training.') 
      ); 
      //generates a unique ID for the statement 
      stmt.generateId(); 
      //Other contextual information about the Activity 
      stmt.addOtherContextActivity(new ADL.XAPIStatement.Activity('http://www.example.com/articles/34257')); 
      //Registration: An instance of a learner experiencing a particular Activity. 
      stmt.generateRegistration(); 
      configLRS(); 
      sendTheStatement(stmt); 
} 

    //this tells the app where to send the xAPI statements 
function configLRS() { 
    ADL.XAPIWrapper.changeConfig({ 
       'endpoint': 'https://lrs.adlnet.gov/xapi/', 
       'user': '', 
       'password': '', 
       'auth': '' 
      }); 
} 

//fires off the statement to the LRS 
function sendTheStatement(stmt) { 
    ADL.XAPIWrapper.sendStatement(stmt); 
} 

/* Get iframe src attribute value i.e. YouTube video url 
    and store it in a variable */ 
    var url = $("#cartoonVideo").attr('src'); 

    /* Assign empty url value to the iframe src attribute when 
    modal hide, which stop the video playing */ 
    $("#myModal").on('hide.bs.modal', function(){ 
     $("#cartoonVideo").attr('src', ''); 
    }); 

    /* Assign the initially stored url back to the iframe src 
    attribute when modal is displayed again */ 
    $("#myModal").on('show.bs.modal', function(){ 
     $("#cartoonVideo").attr('src', url); 
    }); 

</script> 

Answer 1

一つの解決策は、ボタンにIDを設定し、

$("#mybutton").on("click", function() { 
alert("Hey"); }); 

代わりにクリックイベントにフックすることができ

$("#myModal").on("show", function() { 
alert("Hey"); });