jquery not working on button click i dont know why

jquery button click not working
jquery click not working
jquery trigger click not working
jquery after click event
javascript trigger click event on element
jquery css
jquery trigger click on link
jquery hide not working

i have a form

<form method="POST" action="">
  <div class="commentdiv">
    <input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
    <input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
    <input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
    <textarea style="" name="comment" id="comment" class="comment" placeholder="  comment here"></textarea>
    <button type="button" style="background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; color: #3897f0; font-weight:600;"class="submit">
      comment
    </button>
  </div>
</form>

and this is my javascript

$(document).on('click', '.submit', function () {

    $post = $(this);
    var username2 = $(this).parent().find("#username").val();
    var comment2 = $(this).parent().find("#comment").val();

    $commentsec = $(this).closest("form").next(".comments");

    //Get values of input fields from DOM structure 
    var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
        comment: $(this).parent().find("#comment").val()
    };

    $.ajax({
        url: 'comments.php',
        data: dataString,
        success: function () {
            alert("alert");
            $commentsec.append('<p class="written"><a href="users.php?id= <?php echo $id3 ?>"><b>' + username2 + '</b> </a>' + comment2 + "</p>" + '<div class="dropdown"><img src="ellipsis.png" class="dots"><div class="dropdown-content"><br><p  class="delete" data-delete=<?php echo $commentid; ?>">delete</p></div></div>');
            $(" #comment").val("");
        }
    });
});

i want that whenever a user clicks on this button an alert should pop up and that comment should append to this form that user has written this code used to work fine but now i dont know what happened it suddenly stopped working can you guys help me rest of my jquery code is working instead of this code

$(document).ready(function(){

$('.submit').click(function () {
  $post = $(this);
  var username2 = $(this).parent().find("#username").val();
  var comment2 = $(this).parent().find("#comment").val();
  $commentsec = $(this).closest("form").find(".comment"); // here you missed to get comment element too.
  var dataString = {
      id: $(this).parent().find("#id").val(),
      username: $(this).parent().find("#username").val(),
      uid: $(this).parent().find("#uid").val(),
      comment: $(this).parent().find("#comment").val()
  };
  // remaining printing stuff goes here
});

});

jQuery CSS on button click not working - JavaScript, jQuery CSS on button click not working I constantly make the mistake of putting # in my ID on HTML, don't know how i didn't see it. Thanks so  Although it may seem like this is all dynamic, what is really happening is JQuery makes a pass over the DOM and wires up the click event when the ready() function fired, which happens before you created the "Click Me" in your button event.

$(document).on('click', '.submit', function () {

    $post = $(this);
    var username2 = $(this).parent().find("#username").val();
    var comment2 = $(this).parent().find("#comment").val();

    $commentsec = $(this).closest("form").next(".comments");

    //Get values of input fields from DOM structure 
    var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
        comment: $(this).parent().find("#comment").val()
    };

    $.ajax({
        url: 'comments.php',
        data: dataString,
        method: "POST",
        success: function () {
            alert("alert");
            $commentsec.append('<p class="written"><a href="users.php?id= <?php echo $id3 ?>"><b>' + username2 + '</b> </a>' + comment2 + "</p>" + '<div class="dropdown"><img src="ellipsis.png" class="dots"><div class="dropdown-content"><br><p  class="delete" data-delete=<?php echo $commentid; ?>">delete</p></div></div>');
            $(" #comment").val("");
        },
        error:function(err){
        console.log(err);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="POST" action="">
  <div class="commentdiv">
    <input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
    <input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
    <input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
    <textarea style="" name="comment" id="comment" class="comment" placeholder="  comment here"></textarea>
    <button type="button" style="background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; color: #3897f0; font-weight:600;"class="submit">
      comment
    </button>
  </div>
</form>

JQuery .trigger("click") event not the 'same' as a real 'click'?, I am trying to use the JQuery .trigger(“click”) event to do this and it… The part that does 'work' is that it plays the sound associated with that button. On a phone and can't check this fully, but a. trigger will not do exactly the same to use .trigger and point to the parent div I still don't get the color change. The click event is not bound to your new element, use a jQuery.on to handle the click.

 $(document).on('click', '.submit', function () {

    $post = $(this);
    var username2 = $(this).parent().find("#username").val();
    var comment2 = $(this).parent().find("#comment").val();

    $commentsec = $(this).closest("form").next(".comments");

    //Get values of input fields from DOM structure 
    var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
        comment: $(this).parent().find("#comment").val()
    };
    //your ajax request here
    console.log(dataString)
});
<form method="POST" action="">
  <div class="commentdiv">
    <input type="hidden" name="id" id="id" class="id" value="<?php echo $pixid;?>">
    <input type="hidden" name="username" id="username" value="<?php echo $activeusername;?>">
    <input type="hidden" name="uid" id="uid" value="<?php echo $id3;?>">
    <textarea style="" name="comment" id="comment" class="comment" placeholder="  comment here"></textarea>
    <button type="button" class="submit">
      comment
    </button>
  </div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Be Slightly Careful with Sub Elements of Clickable Things, You almost surely are, as outside of a , buttons don't do anything without JavaScript. So you do that How do we know if that click happened on the button or not? We have the tagName === "BUTTON") { // may not work, because might be svg or use } }); It's really easy to add an event listener in jQuery. Clicking the click me button will show an alert. After clicking the remove button and add button, then click me does not work. After removing the button and re-appending, the bound click event can’t work anymore. This is where we need to modify the JavaScript to use delegation like so –.

$(document).on('click','.submit',function(e){
     e.preventDefault();
     $post = $(this);
    var username2 = $(this).parent().find("#username").val();
    var comment2 = $(this).parent().find("#comment").val();

    $commentsec = $(this).closest("form").next(".comments");

    //Get values of input fields from DOM structure 
    var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
        comment: $(this).parent().find("#comment").val()
    };
   //Get values of input fields from DOM structure 
   var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
         comment: $(this).parent().find("#comment").val()
    };

   $.ajax({
   url:'comments.php',  
   data:dataString,
   success:function(){
 $commentsec.append('<p class="written"><a href="users.php?id= <?php echo $id3; ?>"><b>'+username2+'</b> </a>'+comment2+"</p>"+'<div class="dropdown"><img src="ellipsis.png" class="dots"><div class="dropdown-content"><br><p  class="delete" data-delete=<?php echo $commentid; ?>">delete</p></div></div>');
     $(" #comment").val("");   
   }
   });
});

this code worked for me i dont know how

.hide(), A function to be called when the animation on an element completes or stops without Moreover, this method can cause problems with responsive layouts if the Click here. </div>. <img id="book" src="book.png" alt="" width="100" <​button>Hide 'em</button> Use arguments.callee so we don't need a named function. I’m not sure of anther way to make this work since you don’t want to use either. Good thing you posted it here on these forums so other, more knowledgeable members can help . RyanReese July 19

jQuery Event Basics, Sets up click behavior on all button elements with the alert class will not have the same click behavior as its peers Consult the article on event delegation to see how to use .on() so that event events so you don't unintentionally disconnect events that you didn't or Suggestions, Problems, Feedback? I am a newbie in jquery, I have a stupid question for onclick function. Please help me. I have a table, when viewer click "Add new" button, I will using jquery add a row to existing table. In new row, there are 2 textbox to input data and a button to transfer data from textbox to php file. This is my code: html code:

On click navigation click not working first time., With my site I am having a navigational problem; I have a form with a drop Moreover, I don't know that syntax you use in your button, but how  @tron-git, @govusfi, @IanJSaul, see the following screenshot for solution on how to close popup window when clicking the button:. Yes, this does close the initial button for the popup, or for that matter results in the popup not opening ;) I thought the reason for this thread was instead that by clicking on a menu item in a popup that has an achor on the current page, the popup shall close.

.stop(), We can create a nice fade effect without the common problem of multiple Another option is to click several buttons to queue them up and see that stop just kills 

Comments
  • Did you tried data: JSON.stringify({ dataString }) in AJAX? Look into console and let us know what the issue showing?
  • nope this code worked fine but dont know what happened suddenly @JitendraRangpariya
  • Did you mean, you are not getting even click event occurring on button?
  • code seems to be ok. The problem could be in your ajax call: go to the chrome debugging tool and check your "Network" tab (filter by XHR) and look on comments.php status
  • You can also use console tab in inspect element of the browser. There you can see errors too.
  • i think my ajax is bringing me problems
  • Your ajax request missing type. Add type: "POST"