Loaded() content won't inherit javascript

Question

I.e, I have two files:

index.php
some-content.php

In the index.php is where I load my CSS and JS:

<head><link href="css/web.css" rel="stylesheet" type="text/css" /></head>
<body><script src="js/web.js" type="text/javascript"></script></body>

Now, what I am doing is loading "some-content.php" with a load() event in "js/web.js":

 $("#content").load('some-content.php');

Long story short:

When I load "some-content.php" it inherits all the necessary CSS styles from css/web.css without me having to include another link href in "some-content.php"

But none of the JS scripts seem te be working - the ones stored in js/web.js that is srced in index.php

Am I force to add:

<script src="js/web.js" type="text/javascript"></script>

again in "some-content.php"?

Thanks

It depends on the javascript, if you are binding for example events using on() it could work. You need to post the javascript. — jeroen
– jeroen, Commented Nov 20, 2013 at 17:23
use the complete callback of the load method to reinitialize tooltip() plugin on new added elements. If it's the tooltip plugin of twitter bootstrap you are using, this plugin already have its own method to delegate it, using option select or something like that, check relevant DOC. UPDATE for twitter tooltip, it's selector option: stackoverflow.com/a/10420203/1414562 — A. Wolff
– A. Wolff, Commented Nov 20, 2013 at 17:33
I tried adding: "$(document).tooltip({ selector:'[rel="tooltip"]' });" and it works fine, only it is ignoring the data-trigger field... (takes on hover as default) — James
– James, Commented Nov 20, 2013 at 17:56

jeroen · Accepted Answer · 2013-11-20 17:32:27Z

3

You are binding the tooltip to the elements on page load. When you add new content, you need to bind the tooltip to the newly added elements. You can do that in the callback function of you ajax call, for example like:

$("#content").load('some-content.php', function() {
  $(this).find("[rel='tooltip']").tooltip();
  // or put stuff like that in an initialization function and call that instead...
});

answered Nov 20, 2013 at 17:32

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fenton · Accepted Answer · 2013-11-20 17:23:56Z

2

This usually happens because you are binding your events with direct bindings such as...

$('.myClass').click(function () {
    //...
});

This will only apply to .myClass elements that are present at the time this binding runs.

If you want to apply to elements that will be added to the DOM later, use the more dynamic on binding.

$(document).on('click', '.myClass', function () {
    //...
});

You can also be more specific - rather than using document - but that was for the purposes of the example.

answered Nov 20, 2013 at 17:23

Fenton

253k74 gold badges404 silver badges414 bronze badges

5 Comments

Vinay Over a year ago

+1 bcoz this was the one which helped me a lot at my works :)

A. Wolff Over a year ago

this accepted answer doesn't seem to answer OP's issue, did i miss something??? Correct answer is jeroen's one

James Over a year ago

@A.Wolff Hey, that's exactly what was going on. I had to add the on() function to all my events :)

A. Wolff Over a year ago

@James i was thinking you were looking for the tooltip plugin but you edited your question making it no more relevant. Delegation with .on() is for events, not plugins

James Over a year ago

Well Steve seemed to realize what my problem might of been. Thanks anyway!

Vinay · Accepted Answer · 2013-11-20 17:28:49Z

1

.load() is a AJAX method that loads dynamic contents.

Use on() for dynamic generated contents

$('selector').on('event',function(){
//something
});

Example:

$( "#data" ).on( "click", function() {
alert( $( this ).text() );
});

Collectives™ on Stack Overflow

Loaded() content won't inherit javascript

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related