Question

I have code snippet like below I am facing problem when I click on the links i.e 1,2,3,4 numbers click was not working … nothing is happening.

Script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        var number = 0;
        number = number+1;

        var numhtml = "<a href='#' rel='"+number+"'>"+number+"</a>"
        $("#slidenumbers").append(numhtml);

        $(".paging a").click(function() {   
            $active = $(this); //Activate the clicked paging
            //Reset Timer
            clearInterval(play); //Stop the rotation
            rotate(); //Trigger rotation immediately
            rotateSwitch(); // Resume rotation
            return false; //Prevent browser jump to link anchor
        }); 

    });
</script>

<div class="paging" id="slidenumbers"></div>

CSS

.paging a {
    padding-top: 2px;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:3px;
    text-decoration: none;
    color: #fff;
    background: #DAF3F8;
    border: 1px solid gray;
}

.paging a.active {
    color:white;
    font-weight: bold; 
    background: #5DC9E1; 
    border: 1px solid gray;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.paging a:hover {
    color:white;
    font-weight: bold; 
}

ERROR:

When I click on the link nothing is happening. Could you please help me on this.

Answer 1

You shoud use live or delegate functions when adding elements dynamically:

$(".paging a").live('click', function() {   
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    }); 

});