按钮没有到达ajax

Question

I am really puzzled as why the 2nd approach is not getting to ajax:

1. (This is firing to ajax ok)

<div id="div_comment">
    <textarea name="text_comment" id="text_comment" placeholder="160 chars or less, no # or @" data-role="none" rows=11 cols=20 onkeypress="if(event.keyCode==13){return false;}" onKeyDown="limitText2(this,160);" onKeyUp="limitText2(this,160);" style="resize:none;"></textarea>
    <button id="comment_btn" class="ui-btn ui-btn-inline" style="border: #ffffff 1px solid;">Enter your comment</button>
</div> <!-- div_comment -->

2. (This is not firing to ajax)

document.getElementById('div_comment').innerHTML = "<br> <br> <textarea name=\"text_comment\" id=\"text_comment\" placeholder=\"160 chars or less, no # or @\" data-role=\"none\" rows=11 cols=20 onkeypress=\"if(event.keyCode==13){return false;}\" onKeyDown=\"limitText2(this,160);\" onKeyUp=\"limitText2(this,160);\" style=\"resize:none;\"></textarea> <span id=\"commenterr\" style=\"font-weight:bold; font-size:90%;\"></span> <br style=\"line-height:190%;\"> <button id=\"comment_btn\" class=\"ui-btn ui-btn-inline\" style=\"border: #ffffff 1px solid;\">Enter your comment</button> </center> <a href=\"#searchpage\" data-transition=\"slide\"> Back </a>";

Both using the same ajax:

$(document).ready(function(){
  $("#comment_btn").click(function(){ //click write_comment a tag btn
  console.log ("ready-comment_btn: clicked comment_btn");
    $.post("cgi-bin/s_comment.pl", {
        comment:"HELLO WORLD IN READY",
    },
    function(data,status){
      document.getElementById('div_comment').innerHTML = data;
    });
  }); //write_comment
}); //ready

The second approach has the same content assigned to innerHTML, but not working, when click on the button, no response, just an orange border glow.

Is this because of Chrome ?

Answer 1

change this to use .on, that way all dynamic elements will be taken care of.

$(document).on("click","#comment_btn",function(){ //click write_comment a tag btn
  console.log ("ready-comment_btn: clicked comment_btn");
    $.post("cgi-bin/s_comment.pl", {
        comment:"HELLO WORLD IN READY",
    },
    function(data,status){
      document.getElementById('div_comment').innerHTML = data;
    });
  });