JQuery selection not working

Question

I am giving an id of "song-pick" in the following code.

$("#archive").append("<div id=\"song-pick\" data-song=\""+song.rank+"\" class=\"box small back"+counter+"\"><span>"+song.title+"</span></div>");

And trying to print by

$('#song-pick').on("click", function() {
  console.log("PICKED");
}

It gets the id well and I can see it on the web as:

<div id="song-pick" data-song="1" class="box small back1"><span>소녀 (A Little Girl) </span></div>

However if I click the element, it doesn't print anything on console. I have no idea why. Tried to fix it by changing to li or ul tags instead of div tag but it didn't work. Need help.

It won't work if `$('#song-pick').on("click")` was called *before* the element was created. Make sure your ordering is correct, or, change it to `$(document).on("click", "#song-pick", callback)` to apply for all future elements. — Derek 朕會功夫, Nov 26 '15 at 04:54
@Derek朕會功夫 `on` make a dynamic binding so order is not important ..corrrect me if im wrong — coolguy, Nov 26 '15 at 04:55
@coolguy Only when you do it the second way as in my comment. — Derek 朕會功夫, Nov 26 '15 at 04:55
Hello , please use like this $(function () { $('#song-pick').on("click", function() { console.log("PICKED"); } } — HEMAL, Nov 26 '15 at 04:56
@Martin park ..you can use `on` or `delegate` for this ..there are plenty of examples in SO related to this — coolguy, Nov 26 '15 at 04:57

score 3 · Accepted Answer · answered Nov 26 '15 at 04:56

3

$('#archive').on("click",'#song-pick', function() {
  console.log("PICKED");
});

Delegate through an element which is there in the DOM.

answered Nov 26 '15 at 04:56

Raja Sekar

2,062
16
23

Worked like a charm. Thanks a lot. – Martin Park Nov 26 '15 at 04:58
**Note:** the way you append the song will produce duplicate `ID`. and **`ID` should always be unique** – guradio Nov 26 '15 at 04:59

JQuery selection not working

1 Answers1