Solved

Table row click event within jquery dialog is not working

Posted on 2013-11-30
3
8,357 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction (All good things must come to an end (http://en.wikipedia.org/wiki/All_Good_Things...))The original MySQL API (http://php.net/manual/en/book.mysql.php) has gone away, deprecated by PHP in Version 5.5, and removed from PHP in all current…
Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

911 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now