Jquery script inside the loaded layer is not working

Question

I have following code snippet in jquery when we click on layer 62 which loads a layer "loaded-page" from a page test.html as follows.

<script>
$(document).ready(function(){
$('#62').on('click', function(e) {

$("#62" ).load( "test.html #loaded-page" );

});

$('#loaded-page').on('click', function(e) {
alert('test');

 });
 }); 

 </script>

 <div id="62">Layer62</div>

Test page coding

 <div id="loaded-page">Loaded page</div>

MY issue is when we click on layer loaded-page inside DOM, the alert test is not functioning. Can anybody suggest a solution for this ? If needed I can prepare a fiddle for this

Yes. It's event delegation. Search for "javascript event on dynamically added content". — random_user_name, Mar 05 '16 at 15:01
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — random_user_name, Mar 05 '16 at 15:07

score 1 · Accepted Answer · edited May 23 '17 at 10:28

This already has an answer, but essentially what you are looking for is event delegation

When you bind the event in your code, that element doesn't exist yet.

So, you bind the event differently, so that it will respond to dynamically added content:

$(document).on('click', '#loaded-page', function(e) {
    alert('test');
});

NOTE: Without knowing your html structure, I can't provide the best solution, but I CAN tell you that you do not want to use document if possible. Instead, you should use the nearest parent that exists when the DOM is initially loaded. In your case, my guess is that this would work:

$('#62').on('click', '#loaded-page', function(e) {
    alert('test');
});

Thanks, I suggest using body is better than a selected layer #62 — Tom, Mar 05 '16 at 20:30

feixinghong · Answer 2 · 2016-03-10T12:27:46.493

0

because that when you bind the

$('#loaded-page').on('click', function(e) {
    alert('test');
});

maybe that the #loaded-page element is not be loaded into the document,so can't find it the better way is :

$(document).delegate('#loaded-page','click',function(){
  alert('ok')

})

edited Mar 10 '16 at 12:27

answered Mar 05 '16 at 15:11

feixinghong

1
1

So how should the OP fix this? (Make your answer good, so future visitors looking for this may upvote it) – random_user_name Mar 05 '16 at 16:39
oh,so sorry ,i'm new here ,i get it – feixinghong Mar 06 '16 at 11:16
You should edit the answer - people in the future will up vote if it's high quality. – random_user_name Mar 06 '16 at 16:27

Jquery script inside the loaded layer is not working

2 Answers2