Ahah, this was the problem I thought i was having. I can't make jQuery
work on dynamic content.
If an element with a class of "file" is added to the document, like
the previous case, no jQuery event related to that element works.
Ex:
$(".file").click(function(){
alert(this)
});
Nothing is ever alerted if that element is clicked.
Example page:
http://pendarenstudios.com/NEW/file_sel.php
On Dec 17, 10:39 am, Jason Kaczmarsky <[email protected]> wrote:
> I must have missed something cause I made a new page and rewrote the
> code and it worked fine. Thanks for the help guys.
>
> On Dec 17, 5:26 am, "Richard D. Worth" <[email protected]> wrote:
>
> > Works for me:
>
> >http://jsbin.com/egoto/
>
> > - Richard
>
> > On Wed, Dec 16, 2009 at 8:44 PM, Jason Kaczmarsky
> > <[email protected]>wrote:
>
> > > Yes, I am sure they are the correct class and are showing up properly.
>
> > > Button press:
> > > //loop
> > > $("#files").append('<div class="file">'+Files[i]+'</div>');
> > > //end loop
>
> > > Firebug:
> > > <div id="files" style="display: block;">
> > > <div class="file">work.txt</div>
> > > <div class="file">SAS Guide.txt</div>
> > > </div>
>
> > > On Dec 16, 7:43 pm, "Smith, Allex" <[email protected]> wrote:
> > > > The browser should render all the styles no matter when they enter.
>
> > > > Are you sure that the class is assigned to those elements? I would make
> > > sure by peeking at the rendered html via Firebug.
>
> > > > -----Original Message-----
> > > > From: [email protected] [mailto:[email protected]] On
> > > Behalf Of Jason Kaczmarsky
> > > > Sent: Wednesday, December 16, 2009 2:14 PM
> > > > To: jQuery (English)
> > > > Subject: [jQuery] Styling dynamic content
>
> > > > So I've created a little app which loads some filenames into a div via
> > > > an AJAX query. This happens when a user clicks a button, not when the
> > > > page loads. Because of this, I cannot style the filenames how I want.
> > > > I've tried using CSS to do the trick:
>
> > > > .file{
> > > > color: #F00;
> > > > }
>
> > > > .file:hover{
> > > > cursor:pointer;
> > > > color:#000;
> > > > }
>
> > > > This CSS colors the filenames red when it loads, but nothing in the
> > > > hover event works.
>
> > > > Instead of this, I tried using jQuery to style it.
>
> > > > $(".file").hover(function(){
> > > > $(this).css("background-color","#F00");
> > > > },function(){
> > > > $(this).css("background-color","#000");
> > > > });
>
> > > > This also does not change anything. I assume it is because the element
> > > > does not exist when the page is rendered, but later on. Although this
> > > > doesn't explain why the text is red when I use the CSS, so I'm a bit
> > > > confused. How would I accomplish this?
