Click event handler not working?

Question

I'm putting together a "FAQ" type of page, and my code isn't working for what seems like no reason. Basically, whenever I try to refer to anything's ID outside of the .getJSON call, it doesn't work. My click event on paragraphs is even refusing to fire (the alert doesn't pop up). What am I doing wrong!

$(document).ready(function () {
$.getJSON("samp.json", function(result) {
    for(i=0;i<result.length;i++){
        var textField = $('<p />').appendTo('body');
        qaDiv = $('<div />').appendTo('body');
        textField.attr("id", result[i].categoryTitle);
        textField.text(result[i].categoryTitle);
        qaDiv.attr('id', result[i].categoryTitle + "qa");

        for(i2=0;i2<result[i].qaArray.length;i2++){
            var qa = $('<p />').appendTo(qaDiv);
            qa.html(result[i].qaArray[i2].question + "</br>" + result[i].qaArray[i2].answer);
        }
    }
});

$("p").click(function () {
    alert("sfsd");
    $("#Moviesqa").slideUp();
});
});

You are binding the event handler before the events exist. Read [Why is my variable undefined after I modify it inside of a function? (canonical asynchronicity topic)](http://stackoverflow.com/q/23667086/218196) and [Events triggered by dynamically generated element are not captured by event handler](http://stackoverflow.com/q/12829963/218196). — Felix Kling, May 15 '14 at 21:41
Just an FYI, try not to make such a vague question title. It really becomes hard for other users who may have the same problem to reference or find and that leads to duplicate questions. — aug, May 15 '14 at 21:45

score 0 · Answer 1 · edited May 15 '14 at 21:52

This is a pretty common problem on SO. The issue is that you assign the click event at the DOM creation point, then you append more elements to the DOM after it's loaded, so those click handlers aren't listening for the new ones.

You should use on instead, which listens past the original DOM creation point:

$(document).on('click', 'p', function() {
    alert('hello world!');
    $('#Moviesqa').slideUp();
});

Note: the element you specify in the first argument (here it's document) can help you narrow down where event handlers are permitted to execute, for example you could assign a click handler to a certain div only - and only p tags that are clicked within that div would adhere to the event listener.

From the manual:

In addition to their ability to handle events on descendant elements not yet created, another advantage of delegated events is their potential for much lower overhead when many elements must be monitored. On a data table with 1,000 rows in its tbody, this example attaches a handler to 1,000 elements:
$( "#dataTable tbody tr" ).on( "click", function() {
  alert( $( this ).text() );
});
A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):
$( "#dataTable tbody" ).on( "click", "tr", function() {
  alert( $( this ).text() );
});

score 0 · Answer 2 · answered May 15 '14 at 21:44

0

You are binding the event with the element before it comes into the DOM. So, you need to delegate the event to the <body> tag, which is statically existing.

$("body").on("click", "p", function () {
    alert("sfsd");
    $("#Moviesqa").slideUp();
});

answered May 15 '14 at 21:44

Praveen Kumar Purushothaman

164,888
24
203
252

Click event handler not working?

2 Answers2

From the manual: