CODEWITHSUNDEEP
jquerycss
Bobby
Bobby

Reputation: 73

Dynamic anchor tag to DIV but CSS click is not working

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.

Upvotes: 2

Views: 1375

Answers (3)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The problem is because the click() handler only attaches events to DOM elements which are available on load. Because you're appending elements dynamically, you need to attach events using either on() if you're using jQuery 1.7+, or delegate() if 1.6 or earlier.

jQuery 1.7+:

$(".paging").on('click', 'a', 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
});

jQuery 1.6 or earlier:

$(".paging").delegate('click', 'a', 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
});

Upvotes: 1

ipr101
ipr101

Reputation: 24236

Your click event won't fire on elements that have been dynamically added to the DOM, you need live or on or delegate

$(".paging").on('click', 'a', function() {

or

$("a .paging").live("click", function() {

Upvotes: 0

matino
matino

Reputation: 17715

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
    }); 

});

Upvotes: 0

Related Questions