When adding new element with jquery plugin calls, you can do like the following:
$('<div>...</div>').hoverCard(function(){...}).appendTo(...)
$(document).on('click', 'selector', handler);
Where click
is an event name, and handler
is an event handler, like reference to a function or anonymous function function() {}
PS: if you know the particular node you're adding dynamic elements to - you could specify it instead of document
.
You are dynamically generating those elements so any listener applied on page load wont be available. I have edited your fiddle with the correct solution. Basically jQuery holds the event for later binding by attaching it to the parent Element and propagating it downward to the correct dynamically created element.
$('#musics').on('change', '#want',function(e) {
$(this).closest('.from-group').val(($('#want').is(':checked')) ? "yes" : "no");
var ans=$(this).val();
console.log(($('#want').is(':checked')));
});
Source: Stackoverflow.com