0

我有一个带有类名的 div，profile-activity-box它作为 AJAX 响应（html 代码）。AJAX 部分完美运行，所以没有问题。使用“作品”，我的意思是 div 显示正确。现在，当我在其上放置点击事件时，它不起作用。我不知道出了什么问题。这是代码：

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

这是有人要求我发布之前的 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>";

再一次，整个事情都正确显示了，并且在我使用 click 事件时也被定义了。我在这里做错了什么？谢谢。

4

4 回答 4

3

您只能将处理程序添加到已经可用的元素。

但是在 ajax 响应之前你.profile-activity-box不在那里。

为了克服这种情况，我们在.

我们将处理程序应用于已经存在的父元素（#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!");
});
于 2013-02-06T19:58:35.840 回答
3

尝试这个

$('#activity-box-wrapper').on('click', '.profile-activity-box', function(){ 
     $(this).next().slideToggle(100);           
});
于 2013-02-06T19:59:01.207 回答
1

改变这个 -

 $('.profile-activity-box').on('click',function(){

对此——

 $('body').on('click', '.profile-activity-box', function(){

使用 on() 的事件延迟模式 - http://api.jquery.com/on/

于 2013-02-06T19:59:46.040 回答
1

执行此代码时，您应该将事件绑定到 dom 中最近的父级：

       $('#activity-box-wrapper').on('click','.profile-activity-box',function(){ // but this does not !
            $(this).next().slideToggle(100);
            console.log("hello!");
        });
于 2013-02-06T19:59:47.293 回答