SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post class created during document loaded

    Hi, I have an element ('a') which is no class and no Id, dynamically i created the class during the document loaded.

    this is how i add class on a element.
    Code:
    $('.mainclass').find('a').eq(1).addClass('firstclass');
    I putted an alert so that i will know that i click the firstclass.

    Code:
    $(function(){
      $('firstclass').click(function(){
        alert("this is firstclass");
    });
      
    });
    unfortunately it will not alert.but i inspect in the firebug the firstclass is in there..I don't know why it did not alert.

    please enlighten my mind on this,.

    Thank you in advance.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    unfortunately it will not alert.but i inspect in the firebug the firstclass is in there..I don't know why it did not alert.
    Because there is an error in your JS.

    Code JavaScript:
    $('firstclass').click(function(){

    should be:

    Code JavaScript:
    $('.firstclass').click(function(){

    Note the missing dot before the class name.

  3. #3
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup,i got wrong typo for that,but here in my code

    $('.firstclass').click(function(){
    still does not work.

  4. #4
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi pullo, can i ask something what is the event.preventDefault() ? what is the purpose for this?

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi there,

    I think that your problem is that you are not stopping the browser from following the link and that is why you are not seeing an alert.
    This is what event.preventDefault() or return false are for.
    See this: http://stackoverflow.com/questions/1...s-return-false

    Other than that, this will work as expected:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery addClass</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
    
      <body>
        <div class="mainclass">
          <a href="www.sitepoint.com">Sitepoint</a><br />
          <a href="www.google.com">Google</a>
        </div>
        <script>
          $(document).ready(function() {
            $('.mainclass').find('a').eq(1).addClass('firstclass');
            $('.firstclass').click(function(){
              alert("this is firstclass");
              return false;
            });
          });
        </script>
      </body>
    </html>

  6. #6
    SitePoint Guru
    Join Date
    May 2012
    Posts
    996
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay,it show now the alert.THank you


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •