I could not click

JavaScript
1

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.


  <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


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

Thank you in advance :slight_smile:

2

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.

$(function() {

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

Hi jemz,

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

$(".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.

$(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 :slight_smile:

4

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 :slight_smile:

5

Hey jemz,

.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:

<!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

Wow, Thank you pullo this gives me idea, now i know the difference.

Thank you so much :slight_smile: