on(click, ...) 不适用于动态 div

Question

我正在尝试在动态加载的 div 中执行 jQuery click function。我已经查看并实施了很多我已经运行无济于事的策略，最后一个是 here.

我的代码运行加载 div:

$(window).load(function(){

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

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

});

这将使用 h2 元素 class userstabletitle 加载 creatorusersdiv.php，如下所示：

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

然后我尝试在单击 .userstabletitle 时显示一条消息：

$(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();
});

});

这是根据上面引用的答案，但它根本不起作用。我尝试实现它的方式有什么不正确的地方吗？

Answer 1

输入此代码

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

在$(window).load方法之后

Answer 2

试试这个代码

$(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();
    });

});

on(click, ...) 不适用于动态 div

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

javascript

jquery

click