我有一个加载了ajax的页面,我在页面上有按钮(用ajax加载),所以我想点击按钮后运行一个警报事件,我试试 bind
, delegate
, live
, on
事件将事件附加到处理程序但没有结果 . 我尝试手动添加测试btn并调用该事件,但通过ajax加载的按钮不会调用Event . 我的HTML代码:
<body>
<a href='#' class='insert_cm'>test btn</a>
<div class="header"></div>
<div class="wrap">
<div class="rightmenu"></div>
<div class="content">
</div>
</div>
</body>
我的 JQuery
代码:
$(function(){
$(".header").load("header.html");
$(".rightmenu").load("sidebar.html");
$.ajax({
type:'POST',
url:'timeline.php',
success:function(data){
$(".content").html(data);
}
});
//insert comment after click the cm-btn
$( ".insert_cm" ).live( "click", function() {
alert( "User clicked on 'foo.'" );
})
});
和 php
代码:
<?php
include('db_inc.php');
include("myfunc.php");
$functionId=$_POST[functionId];
switch($functionId){
case "":
$music_query = $connection->query("SELECT * FROM music LIMIT 15") or die($connection->error);
while($music = $music_query->fetch_array()){
$music_id=$music['msuic_id'];
$music_thumb =$music['music_thumb'];
$music_name=$music['file_name'];
echo "<div class='music-item'>
<div class='music-avatar'>
<img src=admin/thumb/$music_thumb alt='avatar'>
</div>
<div class='music-post'>
<h3> $music_name <a href='#' class='like_music' >لایک</a></h3>
<p> $music_composer </p>";
$comment_query=$connection->query("SELECT * FROM comments where f_music_id = '$music_id'") or die($connection->error);
while($comments = $comment_query->fetch_array()){
$username = get_username($comments['f_user_id']);
echo "
<div class='username_comment'>
<h4> $username <span>:</span></h4>
$comments[comment];
</div>
";
}
echo "<textarea id='txt_cm' name='txt_cm'></textarea>
<a href='#' class='insert_cm'>insert comment</a>";
}
}
?>
3 回答
如果要将事件绑定到动态创建的元素,则始终使用
$(document).on()
.事件 Binders 应位于文档级别,以便在DOM中添加更多元素时识别它
关于$(document).on()的更多信息:Is it possible to capture keydown globally on dynamically added text inputs?
在jQuery版本> 1.8中使用带有更新语法的.on():
Syntax:
这叫做EventDelegation!
.content
引用最近的父元素,也可以使用document
,document.body
.尝试: