button not getting to 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 ?

**[Event binding on dynamically created elements?](http://stackoverflow.com/q/203198/3639582)** — Shaunak D, Apr 17 '15 at 18:00
So you're aware of what's happening here, when this code runs: `$("#comment_btn")`, if that element doesn't exist then nothing is selected, meaning the click event handler is not attached to any element. I haven't used jQuery Mobile in a couple years but the AJAXy nature of the framework means that you don't want to use `document.ready` but one of the jQuery Mobile specific events instead that mimic `document.ready` in the AJAXy environment. — Jasper, Apr 17 '15 at 18:13

score 4 · Answer 1 · edited Apr 17 '15 at 18:20

4

How about using the delegated flavor of .on() :

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

Documentation here for .on(): http://api.jquery.com/on/

edited Apr 17 '15 at 18:20

Jasper

74,169
13
144
142

answered Apr 17 '15 at 18:02

Qutayba

197
9

`.click` is a shortcut to `.on`, the difference here is that you're using a delegated event handler rather than binding directly to the non-existent element. – Jasper Apr 17 '15 at 18:07
explain to me, the diff between "on click" and just click – Cindy Turlington Apr 17 '15 at 18:12
1

@CindyTurlington `.click([callback])` is a shortcut to `.on('click', [callback])`. You're looking for a delegated event handler like in this answer, that uses these parameters: `.on('click', [selector], [callback])`. The delegated event handler is attached to an element that you know is present in the DOM at the time the code runs, `body` always exists so it works, you can also use the `document` object: `$(document).on([event], [selector], [callback])`. – Jasper Apr 17 '15 at 18:18
@CindyTurlington Would you please mark this answer as useful? Thanks – Qutayba Apr 17 '15 at 18:28
why is the innerHTML assignment didn't work, it's on the client side, it's available during run time – Cindy Turlington Apr 17 '15 at 18:32
@CindyTurlington It depends on when you are adding HTML via `innerHTML`, if you run that code just before your event binding then either method will work. – Jasper Apr 17 '15 at 18:41

pjobs · Answer 2 · 2015-04-17T18:44:59.853

0

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

edited Apr 17 '15 at 18:44

answered Apr 17 '15 at 18:01

pjobs

1,225
11
14

You're still attempting to bind to the `#comment_btn` which may or may not exist when the code runs. If you want to use event delegation instead you need to change your syntax. – Jasper Apr 17 '15 at 18:06
The first code example is still functionally the same code as in the question, so the note about using `.on` for dynamic elements is not correct. – Jasper Apr 17 '15 at 18:12
@Jaspersi .on will not take care of dynamically added elements? – pjobs Apr 17 '15 at 18:35
It depends how you use it, in your first example, no it will not. Follow the code through... first you select an element, but wait, the element isn't in the DOM yet so nothing is selected, therefore the event binding is bound to nothing... In the second example you first select an element that always exists, so that's good, then you tell jQuery to bind the event handler to it but only run the callback if the event bubbles up the DOM from a particular element that matches the selector you put in as the second argument. – Jasper Apr 17 '15 at 18:37
Then why the down vote :) , you could have just said first one will not work – pjobs Apr 17 '15 at 18:44
Um, I did say that twice. – Jasper Apr 17 '15 at 18:48
Thank you for correcting it man, I was just too quick to answer – pjobs Apr 17 '15 at 18:50

button not getting to ajax

2 Answers2