JS won't work on loaded html

Question

I'm using select2, jQuery based selectbox.
And want to load a part of the page by selected multiple options.
That works fine, but javascript won't work on the loaded part.
How can I solve this?

<script>
$(function(){
  $("#e1").on("change", function(e){
   $(".map_border").load('.', {"age":e.val, "cat":$("#e2").select2("val") });
 });
});
$(function(){
  $("#e2").on("change", function(e){
   $(".map_border").load('.', {"cat":e.val, "age":$("#e1").select2("val") });
 });
});
</script>

<div class="selector">
 <select id="e1">
  <option value="1">小学生</option>
  <option value="2">中学生</option>
  <option value="3">高校生</option>
 </select>
 <select id="e2">
  <option value="1">算数</option>
  <option value="2">英文法</option>
 </select>
</div>

<div class="map_border" style="height:{{max_loop}}px">
・・・loaded part・・・
</div>

See this answer here: http://stackoverflow.com/a/9331127/5836 — Brettski, Dec 01 '12 at 07:36
Is this a matter of attaching events to elements that are loaded dynamically? — zeMinimalist, Dec 01 '12 at 07:37
Thanks @Brettski. I've read it but I can't figure out how I should use .on. I'll try some more. — koichi_n, Dec 01 '12 at 07:52
Thanks again @Brettski. I misunderstood .on or .live function. I can make it work. — koichi_n, Dec 01 '12 at 08:22

score 0 · Accepted Answer · answered Dec 01 '12 at 08:26

0

User jQuery .live() or .on() depending on the version of jQuery you are using.

http://api.jquery.com/live/

answered Dec 01 '12 at 08:26

Brettski

19,351
15
74
97

JS won't work on loaded html

1 Answers1