Solved

Table row click event within jquery dialog is not working

Posted on 2013-11-30
3
8,594 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

Suggested Solutions

Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
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.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

756 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