[英]Why doesn't this jQuery click event work?
I have a div with class name profile-activity-box
which comes as a AJAX response (html code). 我有一个类名称为
profile-activity-box
的div,它是AJAX响应(html代码)。 The AJAX part works perfectly, so no problem there. AJAX部分可以完美运行,因此没有问题。 With 'works' I mean that the div is displayed correctly.
“作品”是指div正确显示。 Now when I put a click event on it, it doesn't work.
现在,当我在其上放置click事件时,它将无法正常工作。 I can't figure out what goes wrong.
我不知道出了什么问题。 This is the code:
这是代码:
<div class="row-fluid main-div">
<h3 class="offset1">Laatste activiteit</h3>
<div class="span8 offset1" id="activity-box-wrapper"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var id = <?php echo $user['User']['id']?>;
console.log(id);
$.ajax({
type: "POST",
cache: false,
url: '/users/getCheckins',
data: "id="+id,
success: function(resp) {
//console.log(resp);
$('#activity-box-wrapper').html(resp);
},
error: function(e) {
console.log("Server said (error):\n '" + e + "'");
}
});
// this works! So the element is defined!
console.log($('.profile-activity-box'));
// but this does not !
$('.profile-activity-box').on('click',function(){
$(this).next().slideToggle(100);
console.log("hello!");
});
});
</script>
This is the AJAX response before someone asks me to post it: 这是有人要求我发布之前的AJAX响应:
echo "<div class='profile-activity-box'>";
echo "<div class='span6'>";
echo "<img src='/img/gf80x80.jpg' alt='' />";
echo $value['Game']['title'];
echo "</div>";
echo "<div class='span3 offset3' style='padding: 30px;'> ";
echo "<img src='/img/thumbsup.png' alt='likes' />";
echo "<span class='like-count'> 2 </span>";
echo "<img src='/img/messagebubble.png' alt='comments'".
"style='padding-left:30px' />";
echo "<span class='comment-count'> 4</span>";
echo "</div>";
echo "</div>";
echo "<textarea style='display:none;' class='profile-comment-box' rows='3'".
"placeholder='plaats een comment :)'></textarea>";
Once again, this whole thing is displayed correctly and is also defined at the time I use the click event. 再次,整个事情正确显示,并且在我使用click事件时也已定义。 What am I doing wrong here?
我在这里做错了什么? Thanks.
谢谢。
You can only add handlers to elements already available. 您只能将处理程序添加到已经可用的元素中。
But your .profile-activity-box
is not there before ajax response. 但是在ajax响应之前,您的
.profile-activity-box
不存在。
To overcome, this situation, we use jQuery on . 为了克服这种情况,我们在上使用了jQuery。
We apply handler to already present parent element ( #activity-box-wrapper
in this case) and when we click at parent, we check if that was on .profile-activity-box
too. 我们将处理程序应用于已经存在的父元素(在这种情况下为
#activity-box-wrapper
),当我们单击父元素时,我们也会检查它是否也在.profile-activity-box
。
$('#activity-box-wrapper').on('click','.profile-activity-box',function(){ // but this does not !
$(this).next().slideToggle(100);
console.log("hello!");
});
try this 尝试这个
$('#activity-box-wrapper').on('click', '.profile-activity-box', function(){
$(this).next().slideToggle(100);
});
Change this - 改变这个-
$('.profile-activity-box').on('click',function(){
to this - 为此-
$('body').on('click', '.profile-activity-box', function(){
To use the event delagation mode of on() - http://api.jquery.com/on/ 要使用该事件delagation模式() - http://api.jquery.com/on/
You should bind the event to the nearest parent that is present in the dom when this code is executed: 执行此代码时,应将事件绑定到dom中最接近的父级:
$('#activity-box-wrapper').on('click','.profile-activity-box',function(){ // but this does not !
$(this).next().slideToggle(100);
console.log("hello!");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.