SitePoint Sponsor

User Tag List

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

    Post I could not click

    Hi, I have problem on my table i would like to select or click the button with the class "mybtn" and make some alert...
    The TR is loaded dynamically.
    HTML Code:
      <table>
         <tr class="trbank">
             <td>Bank1</td><td>Bank2</td><td>Bank3</td><td><input type="button" class="mybtn"></td>
         </tr>
         <tr class="trbank">
             <td>Bank4</td><td>Bank5</td><td>Bank6</td><td><input type="button" class="mybtn"></td>
         </tr>
          <tr class="trbank">
             <td>Bank7</td><td>Bank8</td><td>Bank9</td><td><input type="button" class="mybtn"></td>
         </tr>
    
         <tr class="trbank">
             <td>Bank10</td><td>Bank11</td><td>Bank12</td><td><input type="button" class="mybtn"></td>
         </tr>
          <tr class="trbank">
             <td>Bank13</td><td>Bank14</td><td>Bank15</td><td><input type="button" class="mybtn"></td>
         </tr>
    
      </table>
    My code is not working

    Code:
      $(function(){
        $('tr.bank').each(function(){
           $(this).parents('td').find(':button.mybtn').click(function(){
               alert("you click this button");
           })
        });
    });
    Thank you in advance

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Dynamically added DOM element don't get click event bounds to them as they have to exist before the event is created, you need to use jQuery's event delegation in order to target elements that exist after the DOM has loaded.

    http://api.jquery.com/delegate/ - Use for jQuery 1.4 and below
    http://api.jquery.com/on/ - Use for jQuery 1.5 and above (recommended)

    Also your event would never have worked as your class is trbank, your searching for a parent TD element yet your above code shows no TD apart from the children inside the TR elements.

    Code javascript:
    $(function() {
     
        $(document).on('click', '.trbank .mybtn', function() {
            alert('You clicked the button for row: ' + $(this).parents('tr').index());
        });
     
    });

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

    If you are adding the button dynamically, then it won't be present when the page loads, so this:

    Code JavaScript:
    $(".mybtn").on("click", function(){
      console.log("Clicked!");
    });

    won't work.

    What you need to do is to attach the handler to an element that is present when the DOM is loaded (e.g. document), then specify a selector (e.g. ".mybtn") with which to filter the descendants of the selected elements which trigger the event.

    Code JavaScript:
    $(document).on("click", ".mybtn", function(){
      console.log("Clicked!");
    });

    http://api.jquery.com/on/

    Let me know if that works for you.

    Edit: Doh! Beaten to it

  4. #4
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi @pullo and @chris.upjohn, Thank you so much your solution is working......@pullo, thank you for explaining me
    What you need to do is to attach the handler to an element that is present when the DOM is loaded (e.g. document), then specify a selector (e.g. ".mybtn") with which to filter the descendants of the selected elements which trigger the event.
    ..this helps me a lot.


    One more thing i couldn't understand what is the difference between the .parent and .parents,when to use this .parent or .parents when traversing the DOM ?

    Many regards

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey jemz,

    Quote Originally Posted by jemz View Post
    i couldn't understand what is the difference between the .parent and .parents,when to use this .parent or .parents when traversing the DOM ?
    .parent() gets the parent of each element in the current set of matched elements.
    .parents() gets the ancestors of each element in the current set of matched elements.
    Both results sets can optionally be filtered by a selector.

    The biggest difference between the two methods is that .parent() only travels a single level up the DOM tree.

    You can run this example on your PC to see what I mean:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>parent vs parents</title>
      </head>
      
      <body>
        <div>
          <ul>
            <li>
              <ul>
                <li>
                  <a href="#" id="myLink">My link</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          console.log("My link's direct parent is a " + $("#myLink").parent().prop("tagName") + " element");
          console.log("All of my link's parents are: " + $("#myLink").parents().map(function() { return this.tagName; }).get().join(", "));
        </script>
      </body>
    </html>

  6. #6
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow, Thank you pullo this gives me idea, now i know the difference.

    Thank you so much


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
  •