为什么这个 jQuery 点击事件不起作用？答案

【问题标题】：Why doesn't this jQuery click event work?为什么这个 jQuery 点击事件不起作用？
【发布时间】：2013-02-06 19:55:47
【问题描述】：

我有一个类名为 profile-activity-box 的 div，它作为 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>";

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

【问题讨论】：

您使用了不正确的 .on 语法来获取事件委托。请参阅文档（或其他一百个重复问题之一）api.jquery.com/on 这是一个教程：learn.jquery.com/events/event-delegation
这里的问题是您试图在当前不存在的 dom 元素上绑定 on 事件。正如@InTry 在下面回答的那样，您需要在绑定时已经存在于 DOM 中的父/根上绑定一个事件。然后使用 className 作为第二个参数来确定它的范围。

标签： jquery ajax events event-handling

【解决方案1】：

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

但是在 ajax 响应之前，您的 .profile-activity-box 不存在。

为了克服这种情况，我们使用 jQuery on。

我们将处理程序应用于已经存在的父元素（在这种情况下为#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!");
});

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

改变这个 -

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

到这里——

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：