Question

我有一个类名为profile-activity-box的div，它是一个AJAX响应（html代码）。 AJAX部分工作得很好，所以没问题。使用'works'我的意思是div正确显示。现在，当我在其上放置一个click事件时，它不起作用。我无法弄清楚出了什么问题。这是代码：

<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事件时也定义了。我在这做错了什么？感谢。

Answer 1

试试这个

$('#activity-box-wrapper').on('click', '.profile-activity-box', function(){ 
     $(this).next().slideToggle(100);           
});

Answer 2

改变这个 -

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

到此 -

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

使用on（） - http://api.jquery.com/on/

的事件爆燃模式

Answer 3

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

       $('#activity-box-wrapper').on('click','.profile-activity-box',function(){ // but this does not !
            $(this).next().slideToggle(100);
            console.log("hello!");
        });

为什么这个jQuery click事件不起作用？

3 个答案: