jQuery发布按钮

Question

i have a page in which multiple posts are coming from database and on these post one can comment when writing comment in text area i am doing some ajax call on POST button currently I am having only 5 posts in my home page Issue is POST button is working fine for only the first post i am seeing the Response text before parsing and after parsing but when i click on other post POST button my console doesnt show any thing heres my code

{'
$(document).ready(function()
{
//this will fire only when page is fully loaded
$('#comment-post-btn').each(function()
{
    $(this).click(function()
    {
 console.log("Button is working fine");
 comment_insert_btn_click();
  });
 });
 function comment_insert_btn_click()
 {
 var _comment=$('#comment-post-text').val();
 var _userId=$("#userId").val();
 var _userName=$("#userName").val();
 if(_comment.length > 0 && _userId!=null)
 {
 console.log(_comment + "UserId: " + _userId + "UserName: " + _userName);
 $.post("comment-insert.php" , 
    {
        task : "comment-insert",
        userId : _userId,
        comment: _comment
    },
        function(data)          
        {    
            console.log("ResponseTextBeforeParsing " + data);
            data = JSON.parse(data)
            console.log("ResponseTextAfterParsing " + data);

            comment_insert(data);
            console.log("ResponseTextAfterParsing " + data);

        }
    )
 $('.comment-insert-container').css('border' , ' 1px solid #fffff0');
 }
 else
 {
 $('.comment-insert-container').css('border' , ' 1px solid #ff0000');
 console.log("the text area was empty");
 }

$('#comment-post-text').val("");
}
'}

Answer 1

You don't need to register the clicks with .each() and duplicate id are not valid. So you either devise a system to generate unique id or use the class attribute.

$(".comment-post-btn").on("click", function(e) {
    var me = $(this);  // the instance that triggered the click

});

Since it looks like you're trying to get form values, trap the form submission instead.

$("form.my-form-class").on("submit", function(e) {
    e.preventDefault();

    var form = $(this);
    var data = form.serialize();
    var comment = form.find("textarea[name='comment']").val();

    $.ajax({
        ...
    });
});