after ajax call jquery function not working properly

Question

headers :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/timeago.js" ></script>
 <script src="js/test_helpers.js" type="text/javascript"></script>

photos.php

$(".cmdclose").click(function(){

    var id=this.id;

    $.post("cmddel.php" ,{"id":id});
        setTimeout(function(){      
        <?php echo 'var id = '.json_encode($_GET['id']).';'; ?>
        $('#cmdz').load('cmdajax.php?id='+id);      
    },1000);

});

html part:

<div id="cmdz"> 
    <?php
    $uid=$_SESSION['uid'];
    $query="SELECT *
    FROM `cmds`
    WHERE `pid` =${id} ORDER BY `id`";
    $result=$db->query($query);
    ?>

    <table id="tblcmd">
        <tr>

    <?
    while($result_set=$db->fetch($result)){
        // echo $result_set['cmds'];
        $uid=$result_set['uid'];

        $query2="SELECT * FROM `user` WHERE `id` ='${uid}'";

        $result2=$db->query($query2);
        $result_set2=$db->fetch($result2);


        echo '<td>'.$result_set2['name'].'</td>'; 

        echo '<td>:'.$result_set['cmds'].'</td>';
        echo '<td  id="'.$result_set['id'] .'"><img src="images/cmd-close.jpg" class="cmdclose" id="'.$result_set['id'] .'" /> </td>'; 

        ?>
        </tr>
        <?php
    }
    ?>

    </table>

</div>

cmdajax.php

<?php
    session_start(); 
    require_once("includes/database.php");
    if(isset($_GET['id'])){
        $id=$_GET['id'];
    }

    $uid=$_SESSION['uid'];
    $query="SELECT * FROM `cmds` WHERE `pid` =${id} ORDER BY `id`";

    $result=$db->query($query);
?>

<table id="tblcmd">
    <tr>
    <?php
    while($result_set=$db->fetch($result)){
    // echo $result_set['cmds'];
    $uid=$result_set['uid'];

    $query2="SELECT * FROM `user` WHERE `id` ='${uid}'";

    $result2=$db->query($query2);
    $result_set2=$db->fetch($result2);

    echo '<td>'.$result_set2['name'].'</td>'; 
    echo '<td>:'.$result_set['cmds'].'</td>'; 
    echo '<td  id="'.$result_set['id'] .'"><img src="images/cmd-close.jpg" class="cmdclose" id="'.$result_set['id'] .'" /> </td>'; 
    echo '<td><abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr></td>'; 
    ?>
    </tr>
    <?php
    }
    ?>

         </table>

My problem is that, after one page refresh or Ajax call, the function $(".cmdclose").click(function() will not work. Why not?/// this problem resolved

now i am facing this problem:

jQuery("abbr.timeago").timeago(); this selector won't work properly what will be the reson? Thanks

Answer 1

Because you bounded the functionality of the click event even before the new content is injected to the DOM. So that functionality will not be available to the newly added (injected) dynamic content. To handle this , you need to use jQuery on

So Change your code from

$(function(){
   $(".cmdclose").click(function(){    
     // your code    
   });
});

to

$(function(){
    $(document).on("click",".cmdclose",function(){
       //your code
    });
});

jQuery on will work for current and future elements. on is avaialbe from jQuery 1.7+ onwards. If you are using a previous version of jQuery, use live

Answer 2

try:

$(".cmdclose").live("click",function(){...