Jquery on click not responding to clicks from an appended html element

Question

I have this page http://zoo-keeper-objects-53412.bitballoon.com/ for my wap website. I have several buttons that append a form group to a div with id space. This is the code

<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>

The buttons do append the form group as expected but when i try to click the buttons of the appended html element, the on click event handler does not react. This is the code specifically

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

How can i have the button click respond to my clicks?.

@MilindAnantwar, there will be no duplicate ids in that code as the functions replace the html inside space so therefore they will not repeat. Mongo, have a read of this - [delegated events](http://api.jquery.com/on/#direct-and-delegated-events) it will explain why the answer below from zuluk works — Pete, Jun 22 '17 at 08:53

score 0 · Accepted Answer · answered Jun 22 '17 at 08:48

0

Try

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

.on() needs the action and the element.

answered Jun 22 '17 at 08:48

zuluk

1,557
8
29
49

Jquery on click not responding to clicks from an appended html element

1 Answers1