Sunday, 11 August 2013

style to dynamically created elements

style to dynamically created elements

i am trying to do something like this
Suppose before the page is loaded , the structure of page is like this
<div class="maindiv">
<div><a href="www.google.com" class="divlink">div1</a></div>
<div><a href="www.google.com" class="divlink">div2</a></div>
<div><a href="www.google.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>
now i am using jquery and overriding the href of the links like this
$('document').ready(function(){
$('.divlink').attr('href','www.facebook.com');
});
so after the loading, the page the will be like this.
<div class="maindiv">
<div><a href="www.facebook.com" class="divlink">div1</a></div>
<div><a href="www.facebook.com" class="divlink">div2</a></div>
<div><a href="www.facebook.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>
its ok till now.
Now when someone will click on showmore link, next 3 items will be
appended to maindiv, this link will be deleted and new showmore link will
be created after the all 6 div. the overall page will be like this now.
<div class="maindiv">
<div><a href="www.facebook.com" class="divlink">div1</a></div>
<div><a href="www.facebook.com" class="divlink">div2</a></div>
<div><a href="www.facebook.com" class="divlink">div3</a></div>
<div><a href="www.google.com" class="divlink">div1</a></div>
<div><a href="www.google.com" class="divlink">div2</a></div>
<div><a href="www.google.com" class="divlink">div3</a></div>
<a class="showmore" onclick="somefunctiontoloadmoreitems()">showmore</a>
</div>
All this functionality is standard means i cant do anythink will all this.
i can only write some jqyery to override the href of links. due to my
jquery on ready event of document the href of only first 3 elements will
be overridden. but i want to override the href for all the links the will
be generated on clicking showmore button also.
Please tell me any method to do so.
Thanks.

No comments:

Post a Comment