CODEWITHSUNDEEP
jqueryclickinlinelive
JLowe
JLowe

Reputation: 21

Move inline JQuery function to .js file

I have the following inline code that I would like to move to my js file ...

$("input.checkbox").live('click',function(doStuff){my code})

I have tried various ways but no luck, my function just does nothing when I move it to my .js file. When it's inline in works perfectly. I am quite new at all of this so be gentle.

Upvotes: 2

Views: 1737

Answers (5)

Farhan Ahmed
Farhan Ahmed

Reputation: 340

You should add your custom JS file script tag at the end of your html just before closing the tag, so all controls have been rendered. Should work fine!

Upvotes: 0

labroo
labroo

Reputation: 2961

  1. Make sure the js file is added to the page(script tags). It is recommended to add the file to the end of the body.

  2. Make sure jQuery is added to the page before your external js file.

  3. Wrap your code inside $(document).ready(function(){[Your code here]}), so that it executes after the DOM is loaded.(this ensures your elements are available for selection)

Upvotes: 0

Simon
Simon

Reputation: 2116

You need your reference to the jquery library:

Create your javascript include file myfile.js and then a reference to this file:

Obviously then copy your code into you .js and all should be dandy...

Upvotes: 0

Jamiec
Jamiec

Reputation: 136164

Did you remember to put wrap the code in a ready call inside the js file?

$(document).ready(function(){
    $("input.checkbox").live('click',function(doStuff){my code});
});

or the shortened version

$(function(){
    $("input.checkbox").live('click',function(doStuff){my code});
});

Upvotes: 1

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

1- Move your code to your new JS file as you did.

2- When referencing your JS file inside your page, reference it AFTER the jQuery file, JavaScript will be executed according to the order of the files included.

<html>
    <head>
        <script type="text/javascript" src="YOUR_jQUERY_FILE"></script>
        <script type="text/javascript" src="YOUR_CUSTOM_FILE"></script>
    </head>
    <body>
        ..
        ..
        ..  
    </body>

</html>

3- Try your page now, it should be working fine.

let me know if this didn't fix it, or if it did :)

Upvotes: 0

Related Questions