javaScript not working for page loaded by jquery load function

Question

Page 1

<html>
<head>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
</head></head>
<body><div id="main"></div> </body>
<script>$('div[id=main]').load('page2.php')
$('span[id*=temp]').on('click',function(){
alert(this.id); }); //this block of code not working!!
</script>
</html>

Page 2

<div>
<span id="temp">
this is demo
</span>
</div>

Basically i want to load page2 again in main div when tag is clicked but am not able to fetch the id of the tag in page one,script of page1 not working for page 2 items or tags

Your span doesn't exist when the code that binds the event runs. http://learn.jquery.com/events/event-delegation/ — Kevin B, Jan 28 '13 at 19:26
there's a solution at the link i provided and on the documentation page for `.on()`, i don't need to create a third. http://api.jquery.com/on — Kevin B, Jan 28 '13 at 19:31

score 1 · Accepted Answer · answered Jan 28 '13 at 19:34

You are trying to bind the event right after the AJAX call, so the element doesn't exist yet. The call is asynchronous, so it doesn't stop the code execution to wait for the response.

Either bind the element after the content has loaded, using the success callback of the load method:

$('div#main').load('page2.php', function(){
  $('span[id*=temp]').on('click', function(){
    alert(this.id);
  });
});

or use a delegate to bind the event to the parent element:

$('div#main').load('page2.php');
$('div#main').on('click', 'span[id*=temp]', function(){
  alert(this.id);
});

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

Because you need to specify the parent selector to taking into account the elements created dynamicaly.

Exemple :

$("#main").on('click', 'span[id*="temp"]', function() {alert('Handler is working!');})

Here is a good related question : jQuery 1.7 on() and off() methods for dynamic elements

edited May 23 '17 at 11:51

Community

1
1

answered Jan 28 '13 at 19:26

sdespont

13,915
9
56
97

You have a syntax error. Change 'span[id*=temp]' by 'span[id*="temp"]', I have updated my answer – sdespont Jan 28 '13 at 19:44
The inner quotes are not required. – Kevin B Jan 28 '13 at 20:20
inverted comma ie " " are included when name has number or _ otherwise we don't need them – dissectorz Feb 03 '13 at 18:52

javaScript not working for page loaded by jquery load function

2 Answers2