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, Nov 20 '13 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: http://stackoverflow.com/a/10420203/1414562 — A. Wolff, Nov 20 '13 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, Nov 20 '13 at 17:56

score 3 · Answer 1 · answered Nov 20 '13 at 17:32

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...
});

score 2 · Accepted Answer · answered Nov 20 '13 at 17:23

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 '13 at 17:23

Fenton

241,084
71
387
401

1

+1 bcoz this was the one which helped me a lot at my works :) – Vinay Nov 20 '13 at 17:27
1

this accepted answer doesn't seem to answer OP's issue, did i miss something??? Correct answer is jeroen's one – A. Wolff Nov 20 '13 at 17:38
1

@A.Wolff Hey, that's exactly what was going on. I had to add the on() function to all my events :) – James Nov 20 '13 at 17:44
@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 – A. Wolff Nov 20 '13 at 17:45
1

Well Steve seemed to realize what my problem might of been. Thanks anyway! – James Nov 20 '13 at 18:01

score 1 · Answer 3 · edited Nov 20 '13 at 17:28

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() );
});

Loaded() content won't inherit javascript

3 Answers3