?
Solved

Table row click event within jquery dialog is not working

Posted on 2013-11-30
3
Medium Priority
?
9,303 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 54

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 45

Accepted Solution

by:
Chris Stanyon earned 2000 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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
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…
Suggested Courses

598 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