2

JS: 

htmlStr += '<table id="summary-table">'
         + '<col width="200"><col width="315"><col width="600"><col width="1000">'
         + '<tr><th>Month'
         + '&nbsp;&nbsp;&nbsp;<img id="azsort-month" src="sort.png" alt="Sort by Alphabetical Order (A to Z)" style="width:20px; height:20px;">'
         + '</th><th>Header2</th><th>Header3/th><th>Header4</th></tr>';

I've tried both

htmlStr += '<table id="summary-table">'
         + '<col width="200"><col width="315"><col width="600"><col width="1000">'
         + '<tr><th>Month'
         + '&nbsp;&nbsp;&nbsp;<img id="azsort-month" src="sort.png" onclick="alert("test")" alt="Sort by Alphabetical Order (A to Z)" style="width:20px; height:20px;">'
         + '</th><th>Header2</th><th>Header3/th><th>Header4</th></tr>';

and

$(document).ready(function() {
        $('#azsort-month').click(function(){
            alert("test");
        });
    });

and

$('#azsort-month').click(function(){
  alert("test");
});

the htmlStr var is part of a function that displays a JSON output as an HTML table; it works for whole table except the click event on this img

faalbane
  • 105
  • 1
  • 1
  • 5
  • 2
    Look at the quotation marks: `onclick="alert("test")"`. Do you notice anything? How about if I write `onclick="alert("`? As for the jQuery approach, see [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/q/12829963/218196). – Felix Kling Mar 28 '16 at 15:08
  • You should try to use $('#azsort-month'). on ('click', function () {}); – Jainil Mar 28 '16 at 15:10
  • where/how is this htmlstr inserted into the dom v.s. where you run the .ready() call? ref: http://stackoverflow.com/questions/6537323/jquery-function-not-binding-to-newly-added-dom-elements – Marc B Mar 28 '16 at 15:10
  • @jainilnagar: What exactly would that change? That's equivalent to `.click(function() {})`. – Felix Kling Mar 28 '16 at 15:10
  • Because you have a dynamically generated elements, so simple click() will not work at that time – Jainil Mar 28 '16 at 15:16
  • @jainilnagar: Again, `click(...)` and `.on('click', ...)` are equivalent. If you want to use event delegation, you need to bind the handler to an ancestor and pass the target element selector to `.on`. See the accepted answer for the correct syntax. – Felix Kling Mar 28 '16 at 18:40

1 Answers1

3

You have to use event delegation, as #azsort-month img doesn't exist at the time you're attaching that event handler, so:

$(document).on('click','#azsort-month',function(){
  alert("test");
});
The Process
  • 5,913
  • 3
  • 30
  • 41
  • @SurrealDreams: *"Event delegation will add the event to any elements that match the selector in the second parameter of the .on() function."* That's not correct. The event handler is not *added* to those elements (it can't be because those elements might not exist yet!). The event handler is bound only to the elements you call `.on` on (e.g. `document` in the above example). However, the event handler is *executed* only for elements that match the selector passed to `.on`, if the event originates from (within) them. – Felix Kling Mar 28 '16 at 18:42