Solved

Table row click event within jquery dialog is not working

Posted on 2013-11-30
3
8,427 Views
Last Modified: 2013-12-02
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
Comment
Question by:Mohlalefi
3 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39687064
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39687197
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
 

Author Comment

by:Mohlalefi
ID: 39689356
Thank you very much.It worked perfectly!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Foolproof security solutions has become one of the key necessities of every e-commerce or Internet banking website. If you too own an online shopping site then its vital for you to equip your web portal with customer security features that can allow…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn how to count occurrences of each item in an array.

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question