• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9541
  • Last Modified:

Table row click event within jquery dialog is not working

I display the html table within jquery ui dialog box.I have handled the table row click event to fire whenever a row is selected as follows:
 $('#tableItems').find('tr').click(function () {
             var row = $(this).find('td:first').text();
             alert('You clicked ' + row);
         });

Open in new window


my html code:
 <div id="table">
        <table id="tableItems" style="width:50%;border-collapse:collapse;" cellpadding="10">
        <thead class="ui-widget-header ui-state-default ui-corner-all" style="text-align:center">
        </thead>
        <tbody> 
        </tbody>
        </table>
    </div>

Open in new window


and the code that loads  the above div content into the dialog is as follows:
$("#table").dialog({
                         modal: true,
                         height: 400,
                         width: 1000,
                         buttons: {
                             "Select Item": function () {
                                 //
                             },
                             Cancel: function () {
                                 $(this).dialog("close");
                             }
                         }
                        
                     });

Open in new window

and I populate the table dynamically with data.
The table row click event does not work when a table is within this dialog but works perfectly when it's not.
0
Mohlalefi
Asked:
Mohlalefi
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think you will need to give us a link to your page.  The code you provided does not help clue us in as to what is going on.  When I take what you have and add rows of data it works.

Please see the jsbin I created http://jsbin.com/aGIMifu/1/  If you have not used this tool before, click on the "HTML" and "Javascript" tabs at the top to view those panes. I have pasted what I used below.  All works as is.

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
   <div id="table">
        <table id="tableItems" style="width:50%;border-collapse:collapse;" cellpadding="10">
        <thead class="ui-widget-header ui-state-default ui-corner-all" style="text-align:center">
        </thead>
        <tbody> 
          <!-- This is sample added -->
          <tr><td>Testing</td></tr>
          <tr><td>Testing2</td></tr>
          <tr><td>Testing3</td></tr>
        </tbody>
        </table>
    </div>
</body>
</html>

Open in new window

$("#table").dialog({
    modal: true,
    height: 400,
    width: 1000,
    buttons: {
        "Select Item": function () {
            //
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }

});
$('#tableItems').find('tr').click(function () {
    var row = $(this).find('td:first').text();
    alert('You clicked ' + row);
});

Open in new window

0
 
Chris StanyonCommented:
When you bind a function using click(), it binds to elements that exists when you call it (TRs that exists at that time). You say you add the TRs dynamically, so you will need to bind the event using the on() function instead of the click() function:

$('#tableItems').on('click', 'tr', function() {
   var row = $(this).find('td:first').text();
   alert('You clicked ' + row);
});

Open in new window

It's called event delegation, and you need to use this method for binding events to any dynamically created elements.
1
 
MohlalefiAuthor Commented:
Thank you very much.It worked perfectly!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now