CODEWITHSUNDEEP
javascriptjquerydynamicimage-gallery
aurel
aurel

Reputation: 3132

How to add jquery events to added classes?

I am trying to create an image gallery, I am using numbers instead of left/right arrows. At the moment, I am trying to get it working with only 2 image (i.g 2 numbers)

this is the html . the id page, is the highlighted number

 <div class="grid_1 pagelink" id="page"><p><a href="">1</a></p></div> 
<div class="grid_1 pagelink"><p><a href="">2</a></p></div>

the first time the page loads, the code below works. so when I click on link 2 the the code bellow runs fine. But then I want the same code to be triggered when I click back on the first link; but when I do that, the page refreshes by ignoring the code bellow:

 $('.pagelink').live('click', function(e){
    e.preventDefault();
        var frame = $(this).text() - 1;
        var frames =     240 * frame;
    //  $('#gal').animate({marginLeft:'500px'},'slow'); 
        $('#gal').animate({marginLeft:  "+="+frames+'px'},'slow');
    $(this).attr('id', 'page').removeClass('pagelink');
    $('#page').addClass('pagelink').removeAttr('id','page');
       // $('#book').animate({    left: '50'  });
    })

I thought that the .live() would do that for me but it is not working.

I hope you could help

thank you

Upvotes: 1

Views: 118

Answers (2)

Naren Sisodiya
Naren Sisodiya

Reputation: 7288

Previous, this is because you are removing the class of link "pagelink" which were used to map the clicked event.

Also, use another class instead of id(#page) to identify the #page link, id might be problem if its already assign to other link. like

$(this).removeClass('pagelink').addClass('page');
$('.page').addClass('pagelink').removeClass('page');

Upvotes: 1

mkoryak
mkoryak

Reputation: 57968

live should work fine. i think you have a bug in your code, and its probably here:

$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');

what exactly are you trying to accomplish with this code?

when you click on page2, the you set the div's id to be page, but now you have 2 elements with an id of page, and when you select that id, you get the first one (ie page1), but you still remove the class pagelink from page2

in other words, the bug is that at some point you will have 2 elements with the same id (and ids must be unique btw) so when you select that id with $('#page') you always get the first one

Upvotes: 1

Related Questions