This code works only once after I click again it does nothing. I don't know what's going on any help will be appreciated. This is the html code <!DOCTYPE html> <html> <head> <style> tr { background-color: blue; color: white; } </style> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src='script.js'></script> <title>This is a jquery test</title> </head> <body> <table> <tbody> <tr id="1"><td>1</td><td>Hello World1</td><td>Mpol</td></tr> <tr id="2" ><td>2</td><td>Trololololo</td><td>Lalalalala</td></tr> <tr id="3"><td>3</td><td>Let's go</td><td>Fail</td></tr> </tbody> </table> </body> </html> HTML: and this is script.js file $(document).ready(function() { selected = 0; $("tr td").click(function() { if(selected != 0) { $("tr#"+id).html($(this).parent().html()); $(this).parent().html(inner); $("tr#"+id).removeAttr('style'); selected = 0; } else { inner = $(this).parent().html(); id = $(this).parent().attr("id"); $(this).parent().css("background-color", "green"); selected = 1; } }); }); HTML:
This is happening because you are changing the mark up after the dom has loaded. You need to use on to fix this. API docs: http://api.jquery.com/on/ Fixed code: $(document).ready(function() { selected = 0; $(document).on('click', 'tr td', function() { if(selected != 0) { $("tr#"+id).html($(this).parent().html()); $(this).parent().html(inner); $("tr#"+id).removeAttr('style'); selected = 0; } else { inner = $(this).parent().html(); id = $(this).parent().attr("id"); $(this).parent().css("background-color", "green"); selected = 1; } }); }); Code (markup): Hope it helps.