jQuery .on('change') will not fire when div html is appended

Question

I hope the title gives enough description for the problem - here is some code and a plnk;

$(document).ready(function() {
  $(document).on("change", '#selectCountry', function() {
    alert("changed");
  })
});

$("ul#countries li a").click(function() {
  $("#selectCountry").html("")
  $("#selectCountry").append($(this).html())

});

http://plnkr.co/edit/1MxnJmL3RlBeZy3pvPhH?p=preview

I've tried to read previous questions on here regarding a similar issue, but none of the solutions posted seemed to work for me. I'm hoping it's just a small thing I'm missing?

Thanks

Answer 1

remove this

$(document).ready(function() {
  $(document).on("change", '#selectCountry', function() {
    alert("changed");
  })
});

change your click function like that

$("ul#countries li a").click(function() {
  $("#selectCountry").html($(this).text())
});