Why jquery selector doesn't work for newly replaced tag?
html, javascript, jquery, jquery-selectors
Solution
Change
$("#submitResult").click(function() {
to
$(document).on("click", "#submitResult", function() {
Problem
Why `jquery` selector doesn't work for newly replaced tag. I have a simple script, when the user clicks `submitResult button`, the server side returns a new div with id="content", and I used the jquery `replaceWith()` to replace the old one. I noticed that after the `id="content"` element was replaced, the next time when I click submitResult, it doesn't send the data to server side. FYI, this submitResult id is inside the newly replaced element. Can anyone tell me how to refresh the replace html tag, thus to let `$("#submitResult").click(xxx)` work again? Thanks ``` <html> <head> <script src="js/jquery/jquery-1.7.2.min.js"></script> <script> function handleData(data, status) { $("#content").replaceWith(data); }; $(document).ready(function() { $("#submitResult").click(function() { var $result = $("#result").val(); $.get("e?result=" + $result, handleData); }); }); </script> </head> <body> <div id="content"> <div class="resultbox"> <input id="result" type="text" value=""></input> <input id="submitResult" type="button" value="Submit"></input> </div> </div> <!-- other content --> </body> </html> ```