That's because when you bind events on elements, and you remove those
elements, and introduce new elements, they will not be binded
automatically. There are two options:
1) Re-bind the events (which is what made it work for you on your
second code)
2) Use event delegation (Google for more info)
jQuery has $.live that uses event delegation.
You can use it in your code like this:
$("tbody tr").live("click", function(){
alert("hiiiiiiiiii");
});
On Sep 24, 4:59 am, dattu <[email protected]> wrote:
> Hi,
>
> I am facing one problem In jquery. For easy understanding, below html
> code created.
>
> Before clicking on CHANGE label if click on 12345, I am getting
> hiiiiiii alert message.
> After clicking on CHANGE I am not getting alert message.(I am
> experting hiiiiii should come on click of 67890 also).
>
> code sample
>
> <html>
> <head>
> <script src="http://code.jquery.com/jquery-latest.js";></script>
>
> <script>
> $(document).ready(function(){
> $('#change').click(function(){
> $('#div1').empty();
> $('#div1').append('<table><thead><th>NEW TEST</th></
> thead><tbody><tr><td>67890</td></tr><tr><td>EFGHI</td></tr></tbody>');
> });
> $("tbody tr").click(function(){
> alert("hiiiiiiiiii");
> });
>
> });
> </script>
>
> </head>
> <body>
> <div id="div1">
> <label id="change">CHANGE</label>
> <table>
> <thead>
> <th>
> TEST
> </th>
> </thead>
> <tbody>
> <tr>
> <td>12345</td>
> </tr>
> <tr>
> <td>ABCD</td>
> </tr>
> </tbody>
> </div>
> </body>
> </html>
>
> 1) Please explain why this is not behaving as experted.
> 2) In case of NOTE (see at last) change, why it is working?
> 3) how can I slow this issue
>
> NOTE:- If i change like below it is working.
>
> $(document).ready(function(){
> $('#change').click(function(){
> $('#div1').empty();
> $('#div1').append('<table><thead><th>NEW TEST</th></
> thead><tbody><tr><td>67890</td></tr><tr><td>EFGHI</td></tr></tbody>');
>
> $("tbody tr").click(function(){
> alert("hiiiiiiiiii");
> });
>
> });
> });
