Question

我试图在动态加载的jQuery click function内执行div。我已经查看并实施了许多我无法获胜的策略，最后一个是here。

我正在运行以加载div的代码：

$(window).load(function(){

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

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

});

这会加载creatorusersdiv.php h2元素类userstabletitle，如下所示：

＆＃13;

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

＆＃13;

然后在点击.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

试试此代码

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

});

Answer 2

把这段代码

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

在$(window).load方法之后

on（click，...）不适用于动态div

2 个答案: