Jqueryが追加HTML要素からのクリックに応答していません

Question

私はこのページ中にhttp://zoo-keeper-objects-53412.bitballoon.com/私のwapのウェブサイトです。私はid空間を持つdivにフォームグループを追加するいくつかのボタンを持っています。これは、ボタンが期待通りにフォームグループを追加しませんが、私は付加さhtml要素のボタンをクリックしようとすると、クリックのイベントハンドラが反応しないコード

<script type="text/javascript"> 

     $('#log').on('click', function(e) { 
     alert('this connected'); 
     e.preventDefault(); 
     window.loading_screen.finish(); 
     }); 

     function login(){ 
     $('#space').html('<div class="row"><div class="" style="margin-right:15%; margin-bottom: 2%; margin-left:15%; border:3px solid white;"><form><div class="form-group" style="margin-right:15%; margin-left:15%;"><br/><label for="inputEmail">Telephone Number</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div><div class="form-group" style="margin-right:15%; margin-left:15%;"> <label for="inputPassword">Password</label> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div><button type="button" id="log" class="btn btn-danger">Login</button> </form><br/></div></div>'); 
     } 

     function reset(){ 
     //window.loading_screen.finish(); 
     $('#space').html('<div class="row"><div class="" style="margin-right:15%; margin-bottom: 2%; margin-left:15%; border:3px solid white;"><form><div class="form-group" style="margin-right:15%; margin-left:15%;"><br/><label for="inputEmail">Telephone Number</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div><div class="form-group" style="margin-right:15%; margin-left:15%;"> <label for="inputPassword">Password</label> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div><button type="submit" class="btn btn-danger">Reset Password</button> </form><br/></div></div>'); 
     } 

     function join(){ 
     //window.loading_screen.finish(); 
     $('#space').html('<div class="row"><div class="" style="margin-right:15%; margin-bottom: 2%; margin-left:15%; border:3px solid white;"><form><div class="form-group" style="margin-right:15%; margin-left:15%;"><br/><label for="inputEmail">Telephone Number</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div><div class="form-group" style="margin-right:15%; margin-left:15%;"> <label for="inputPassword">Password</label> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div><button type="submit" class="btn btn-danger">Join</button> </form><br/></div></div>'); 
     } 

     window.loading_screen = window.pleaseWait({ 
     logo: "img/logo.png", 
     backgroundColor: '#f46d3b', 
     loadingHtml: "<div id='space'></div> <button class='btn btn-success' onclick='login()'>Login</button> <button class='btn btn-warning' onclick='reset()'>Reset</button> <button class='btn btn-primary' onclick='join()'>Join</button> " 
     }); 

    </script> 

です。これは具体的にコードです

ボタンのクリックは、クリックにどのように反応させることができますか？

Answer 1

は、アクション要素を必要とする.on()

$(document).on('click',"#log", function(e) { 
    alert('this connected'); 
    e.preventDefault(); 
    window.loading_screen.finish(); 
}); 

を試してみてください。