jQuery script in Separate file does not work

Question

I have the following php pages main.php content.php

main.php

When the user clicks a link the content.php page is loaded in a div in main.php page.The main.php when loaded contains a separate script file that has scripts for content.php page. The script works fine when I include it in the content.php but does not work when i place it in a separate file in the head section of main.php What is the reason for this?

JS File

$(function(){
    $('#new').click(function(event){
        event.preventDefault();
        $('#content').load('content.php');
    });
    $('#rank').click(function(event){
        alert("This works!!");
        event.preventDefault();
    });
});

main.php

 <div id="container">
            <div id="header">
            </div>
            <div id="nav">
               <a href="#" id="new">New Page</a>
            </div>
            <div id="content">
    /*** Pages get loaded Here ***/
            </div>
            <div id="footer">
            </div>
        </div>

content.php

<a href="#" id="rank">jQuery Test</a>

did you included original link to jquery and js file in main.php ? — Aadil Keshwani
– Aadil Keshwani, Commented Feb 19, 2015 at 8:23
Yes link to Jquery library and my js file are included in the head section of main.php — AAB
– AAB, Commented Feb 19, 2015 at 8:24
Can you also mention the error you see? The anchor element in content.php may not be available to main.php at the time of adding click event handler. — Annapoorni D
– Annapoorni D, Commented Feb 19, 2015 at 8:27
You need to use event delegation for dynamically added elements — Spokey
– Spokey, Commented Feb 19, 2015 at 8:30

Jeremy Thille · Accepted Answer · 2015-02-19 08:59:19Z

This is a very common question, unfortunately way too common, and has been answered many times before.

You have to understand asynchronism.

When you bind $('#rank').click in your init function, $('#rank') does not exist yet. It's not originally in your DOM. It will be created a few moments later, when the load() function ends, which takes some time (even a few milliseconds).

So $('#rank').click(... does not do anything.

Then $('#rank') is being created.

Now there are two solutions :

1) Wait for $('#rank') to be created, THEN bind a click to it :

$('#content').load('content.php', function(){
     // this is the callback function. It will be executed after the load() finishes and content.php is fetched.

    $('#rank').click(function(event){
        alert("This works!!");
        event.preventDefault();
    });
})

2) anticipate and listen for the creation of $('#rank')

By using $('document').on('click','#rank', function(..., you set a listener that is going to wait for any $('#rank') element to be created. As soon as it happens, it will execute the function. It works for present and future elements.

Ideal Bakija · Accepted Answer · 2015-02-19 08:28:10Z

2

Well that is the problem because you are using the

$(function(){ }

Which is similar to $(document).ready(). This will only recognise the things that load before the $(document).ready() is excecuted.

In order for the new content to call the jQuery code you need to use the

$(document).on() Command:

 $(document).on('click', '#new', function(){
        event.preventDefault();
        $('#content').load('content.php');
})  
.on('click','#rank', function(event){
    alert("This works!!");
    event.preventDefault();
 });

answered Feb 19, 2015 at 8:28

Ideal Bakija

6395 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery script in Separate file does not work

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related