0

profile-activity-boxAJAX応答（htmlコード）として提供されるクラス名のdivがあります。AJAX部分は完全に機能するので、問題はありません。'works'とは、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>";

繰り返しになりますが、このすべてが正しく表示され、クリックイベントを使用するときにも定義されます。私はここで何が間違っているのですか？ありがとう。

4

4 に答える 4

3

ハンドラーは、すでに使用可能な要素にのみ追加できます。

しかし、あなた.profile-activity-boxはajax応答の前にそこにいません。

この状況を克服するために、でjQueryを使用します。

#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 に答える