Trouble understanding how to use .on properly

Question

Probably a silly question, but still new to JQuery.

I have a div acting as a button to load in content via .load, problem is anything I load in JS will not work on it.

HTML:

<div class="a" id="aa">Button #1</div>
</br>
</br>
<div id="loada"></div>
</br>
</br>
<div id="loadb"></div>

JS:

$(document).ready(function(){
  $('#aa').click(function(){
    $('#loada').load('load.htm #bb');
});
  $('#bb').click(function(){
    $('#loadn').load('load.htm #cc');
});

});

Load HTM:

<div class="b" id="bb">Button #2</div>
<div class="c" id="cc">Content #1</div>

I understand that you need to use .on for already loaded JS to work on dynamically created HTML, however I can't seem to get it right.

Anyone able to help?

Edit: What is wrong with the below?

$('#bb').on('click', '#bb', function(event){
  $('#loadb').load('load.htm #cc');
});

Use `$(document).on('event', 'selector', function)` like `$(document).on('click', '#aaa', function() {...})` — Ron van der Heijden, Mar 25 '13 at 10:12

score 1 · Answer 1 · answered Mar 25 '13 at 10:13

1

$("#selector").on("click", function(event){
});

delegated-events approach attaches an event handler to only one elemen

 $("#selector").on("click", "selector", function(event){

    });

answered Mar 25 '13 at 10:13

PSR

39,804
41
111
151

Could you explain this further for me? – NuMs Mar 25 '13 at 10:47
@user2206632 A delegated-events approach attaches an event handler to only one element, the bb, and the event only needs to bubble up one level.See here http://api.jquery.com/on/ – PSR Mar 25 '13 at 10:52
Check my edit at the bottom of the OP, what have I done wrong there? – NuMs Mar 25 '13 at 10:58
cc is the ID of the div I'm trying to load via button 2. aa loads bb, then bb loads cc. – NuMs Mar 25 '13 at 11:03
ok.is it not working fpr u – PSR Mar 25 '13 at 11:04
bb and cc are dynamically creating – PSR Mar 25 '13 at 11:09
Yep, but I can't get bb to work. – NuMs Mar 25 '13 at 11:11
Ugh, I can't get it to work >.< Thanks anyway. – NuMs Mar 25 '13 at 11:18

score 0 · Answer 2 · answered Mar 25 '13 at 10:19

you can try make click on callback function of load like this:

$(document).ready(function(){
  $('#aa').click(function(){
    $('#loada').load('load.htm #bb',function(){
        $('#bb').click(function(){
            $('#loadb').load('load.htm #cc');
        });
    });
});

A.T. · Answer 3 · 2013-03-25T10:24:30.623

-1

    $(document).ready(function(){
      $('#aa').on("click",function(){
        $('#loada').load('load.htm #bb');
           $('#bb').on("click",function(){
                   $('#loadn').load('load.htm #cc');
                 });
          });
    });

if you are using jQuery 1.9 use "on" , if using older version use "live". [live is deprecated remember.]

edited Mar 25 '13 at 10:24

answered Mar 25 '13 at 10:15

A.T.

24,694
8
47
65

Isn't this the same code the OP has? The one that does not work? – Felix Kling Mar 25 '13 at 10:19
Ok, it is different now, but it still bears the same problem. The event handler is still bound before the element exists. – Felix Kling Mar 25 '13 at 10:33

Trouble understanding how to use .on properly

3 Answers3