on(click, ...) not working on dynamic div

Question

I'm attempting to perform a jQuery click function inside a dynamically loaded div. I've looked and implemented many of the tactics I've run across to no avail, the last being here.

The code that I'm running to load the div:

$(window).load(function(){

function showitusers() {
    $("#creatorsettingsdiv").load('http://XX.XX.XX.XX/quizzes/js/creatorusersdiv.php');
}

$("#creatorsettingsusersbutton").click(function() {
        var usersvar = showitusers();
    });

});

This loads creatorusersdiv.php with an h2 element class userstabletitle, shown here:

<html><head>
 <title>Quiz Time | Creator Settings</title>
    <meta content="width=device-width" name="viewport">
    <link rel="stylesheet" href="metro-icons.css">
 <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Muli">
 <link type="text/css" href="css/normalize.css" rel="stylesheet">
 <link type="text/css" href="css/style.css" rel="stylesheet">
 <link type="text/css" href="css/grid.css" rel="stylesheet">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
 <div class="header">
  <div class="wrapper">
   <ul class="nav">
    <li class="leftbutton"><a class="entypo-home" href="home.php"></a></li>
    <li class="leftbutton"><a href="quiz_create.php">Create</a></li>
    <li class="leftbutton"><a href="quiz_take.php">Take</a></li>
    <li class="leftbutton"><a href="scores.php">Scores</a></li>
   <div class="rightnavcontainer">
    <li class="rightbutton"><a class="entypo-cog" href="creator_settings.php"></a></li>
   </div>
   </ul>
  </div>
  <div class="sessionwrapper">
   <div class="loginwrap">Welcome&nbsp;</div><div class="loginname">Ben David&nbsp;</div>  </div>
  <div class="logout"><a href="logout.php">logout</a></div>
 </div>
<!-- <div id="content"> -->
<script src="http://XX.XX.XX.XX/quizzes/js/creatorprofiledivchange.js"></script>
<script src="http://XX.XX.XX.XX/quizzes/js/creatorusersdivchange.js"></script>

<div class="wrap">

 <div class="primary">

  <div id="sideprofile">

   <ul class="leftnav">
    <div>
     <button id="creatorsettingsprofilebutton" class="menuButton">Profile</button>
    </div>
    <div>
     <button id="creatorsettingsusersbutton" class="menuButton">Users
    </button></div>

   </ul>

  </div>

 </div>

  <div id="creatorsettingsdiv" class="secondary">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://XX.XX.XX.XX/quizzes/js/sweetalert-master/dist/sweetalert.min.js"></script>
  <script src="http://XX.XX.XX.XX/quizzes/js/deleteuserwarning.js"></script>
  <link href="http://XX.XX.XX.XX/quizzes/js/sweetalert-master/dist/sweetalert.css" type="text/css" rel="stylesheet">


<h2 class="userstabletitle">List of Users</h2>
<table class="userstable">
 <tbody><tr class="usersheader">
   <td class="tdheader">Real Name</td>
   <td class="tdheader">Username</td>
   <td class="tdheader">Password</td>
   <td class="tdheader">Department</td>
   <td class="tdheader">Role</td>
   <td class="tdheader">Color</td>
   <td class="tdblank">&nbsp;</td>
   <td class="tdblank">&nbsp;</td>
 </tr>

  <tr class="usersbody"><td>BD</td><td>BD</td><td>notit</td><td>Pricing</td><td>creator</td><td>00FF99</td><td class="plusbuttoncell"><li><a class="entypo-plus-circled plusbutton" href="home.php"></a></li></td><td class="editbuttoncell"><li><a class="entypo-pencil pencilbutton" href="home.php"></a></li></td><td class="minusbuttoncell"><li><a id="minusbutton" class="entypo-cancel-circled button" href="#"></a></li></td></tr><tr class="usersbody"><td>Julie</td><td>julieh</td><td>notit</td><td>Pricing</td><td>admin</td><td>4B088A</td><td class="plusbuttoncell"><li><a class="entypo-plus-circled plusbutton" href="home.php"></a></li></td><td class="editbuttoncell"><li><a class="entypo-pencil pencilbutton" href="home.php"></a></li></td><td class="minusbuttoncell"><li><a id="minusbutton" class="entypo-cancel-circled button" href="#"></a></li></td></tr></tbody></table></div>

</div>
</body></html>

I'm then attempting to display a message when .userstabletitle is clicked with the following:

$(window).load(function(){

function showitusers() {
  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    closeOnConfirm: false
  },

  function(){
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  });
  }

$('body').on('click', 'h2.userstabletitle', function() {
  var usersvar = showitusers();
});

});

This is according to the answer referenced above, yet it is not working at all. Is there something incorrect in how I'm attempting to implement this?

`This loads creatorusersdiv.php with an h2 element class userstabletitle.` Provide the HTML markup you get from ajax request. BTW, check console, any error? — A. Wolff, May 30 '15 at 20:56
@Cu3PO42 OP is already delegating event but i guess using wrong selector — A. Wolff, May 30 '15 at 20:57
@A.Wolff just realized this one second too late... Sadly can't unflag — Cu3PO42, May 30 '15 at 20:58
Wait, why was I down-voted? I've already tried selecting the element with the more basic class selector '.userstabletitle'. If I'm selecting incorrectly, I would appreciate a pointer on how that is so rather than a down-vote for a legitimate question. — , May 30 '15 at 21:12
Use a delegate event and make sure you have the selector right — Dominic, May 30 '15 at 21:24
@user4333011 Why don't you provide HTML markup from request in question itself? And again, any error in console??? — A. Wolff, May 30 '15 at 21:28
up voting because OP researched the problem before posting and asked a focused question. — Yogi, May 30 '15 at 21:53

score 1 · Accepted Answer · answered May 30 '15 at 21:38

Try this code

$(window).load(function () {

    function showitusers() {
        var $element = $("#creatorsettingsdiv");
        $element.load('http://XX.XX.XX.XX/quizzes/js/creatorusersdiv.php', function () {
            //this code will run after PHP text loaded
            $("h2.userstabletitle", $element).on("click", function () {
                // your code on click event
            })
        });
    }

    $("#creatorsettingsusersbutton").click(function () {
        var usersvar = showitusers();
    });

});

Wow, Microshine thank you! I figured it probably wasn't loading being triggered because the page was generated after the script was introduced, but I couldn't wrap my head around it. I returned a simple alert with the method above and it worked fine. — , May 30 '15 at 21:45

score -3 · Answer 2 · edited May 30 '15 at 21:08

-3

Put this code

$("#creatorsettingsusersbutton").click(function() {
        var usersvar = showitusers();
    });

after the $(window).load method

edited May 30 '15 at 21:08

spiderman

10,892
12
50
84

answered May 30 '15 at 20:50

anuseranother

277
3
11

There was no change when using this suggestion. – May 30 '15 at 20:52

on(click, ...) not working on dynamic div

2 Answers2