Well, looking at your code.. one thing shows up right away, this
function
var addRow = function(id, name){
$("<tr>" +
"<td>"+id+"</td>" +
"<td>"+name+"</td>" +
"<td align=center>" +
"<input type=checkbox>" +
"</td>").insertAfter($("#atable tbody"))
};
To start with, you aren't closing the <tr>, that's a problem
on top of that, you are inserting this new row *after* the <tbody>
tag, which would result as this (and this goes right off your code
<tbody>..... existing rows ... </tbody><tr><td>id</td><td>name</
td><td>chkbox>/td>
that would be the result of your "addRow" function
you want to (1) properly close the table row, and (2) use the
".append" statement if you are trying to keep the new row as part of
the table body
var addRow = function(id, name){
$("#atable tbody").append("<tr>" +
"<td>"+id+"</td>" +
"<td>"+name+"</td>" +
"<td align=center>" +
"<input type=checkbox>" +
"</td></tr>");
};
On May 16, 1:17 pm, "genive...@gmail.com" <genive...@gmail.com> wrote:
> Hi All,
>
> I'm a new comer to this forums and also jQuery.
>
> There is this problem that I encountered while practicing with jQuery.
>
> jQuery Script
> $(document).ready(function(){
>
> $("#formDiv :button").click(
> function(){
> var id = $("#userId").val()
> var name = $("#name").val()
> addRow(id, name)
> }
> );
>
> var addRow = function(id, name){
> $("<tr>" +
> "<td>"+id+"</td>" +
> "<td>"+name+"</td>" +
> "<td align=center>" +
> "<input type=checkbox>" +
> "</td>").insertAfter($("#atable tbody"))
> };
>
> $("#atable :checkbox").attr("checked", false);
>
> $("#atable thead :checkbox").click(
> function(){
> alert("checkbox in thead")
> }
> );
>
> $("#atable tbody :checkbox").click(
> function(){
> alert("checkbox in tbody")
> }
> );
>
> });//end ready
>
> HTML
> <html>
> <head>
> <title>jQuery Example</title>
> <script type="text/javascript" src="lib\jquery
> \jquery-1.3.2.min.js"></script>
> <script type="text/javascript" src="script.js"></script>
> </head>
> <body>
>
> <div id="formDiv">
> User ID: <input type="text" id="userId"><br/>
> Name: <input type="text" id="name"><br/>
> <input type="button" value="Add Row">
> </div><br/><br/>
>
> <div>
> <table id="atable" width=500px border=1 cellspacing=1>
> <thead>
> <th>User ID</th>
> <th>Name</th>
> <th>
> <input type="checkbox">
> </th>
> </thead>
> <tbody>
>
> </tbody>
> </table>
> </div>
>
> </body>
> </html>
>
> The problem I'm having is, the alert does not fire whenever the
> checkboxes in the tbody are clicked.
>
> Hopefully I can find some help here.
>
> Thanks in advance.
> Alvin
