按钮没有进入ajax

Question

我真的很困惑为什么第二种方法没有进入 ajax：

1. （这是触发 ajax 好）

<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。 （这不会触发 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>";

两者都使用相同的 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

第二种方法将相同的内容分配给innerHTML，但不起作用，当单击按钮时，没有响应，只是橙色边框发光。

这是因为 Chrome 吗？

Answer 1

如何使用.on() 的委托风格：

$("body").on("click", "#comment_btn", function(){ ... });

.on() 的文档：http://api.jquery.com/on/

Answer 2

将其更改为使用.on，这样所有动态元素都会得到处理。

$(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;
    });
  });