javascript - Click event handler and ready handler defined in different js file - not working - Stack Overflow

admin管理员组

文章数量:1291239

click event handler on add button is not working if i do following(click event defined in add.js and ready event is present in index.js).

If i put click event handler and ready handler in index.js, click event works (alert popup).

Please help me.

Note: #add_button is a static button ( present in index.php, not a dynamic div, i tried live instead of click but that doesn't work too).

This doesn't work

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

index.js

$(document).ready(function() {
//code
});

add.js

$('#add_button').click(function(event){
 alert('hello');
});

this works if add.js content is directly put into index.js ?

$(document).ready(function() {
//code
$('#add_button').click(function(event){
 alert('hello');
});
});

click event handler on add button is not working if i do following(click event defined in add.js and ready event is present in index.js).

If i put click event handler and ready handler in index.js, click event works (alert popup).

Please help me.

Note: #add_button is a static button ( present in index.php, not a dynamic div, i tried live instead of click but that doesn't work too).

This doesn't work

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

index.js

$(document).ready(function() {
//code
});

add.js

$('#add_button').click(function(event){
 alert('hello');
});

this works if add.js content is directly put into index.js ?

$(document).ready(function() {
//code
$('#add_button').click(function(event){
 alert('hello');
});
});

• javascript
• jquery

Share Improve this question Follow asked May 26, 2012 at 8:49 P KP K 10.2k1313 gold badges5656 silver badges9999 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

It's not because they're in different files. It's because the code hooking up the click event is running too soon. By putting the click setup inside ready, you're making it wait until "DOM ready". When it's not in the ready handler, it runs right away. If that code is above the #add_button element, the element won't exist yet, and the handler won't be hooked up.

You have two options:

1. Just put the script tag for add.js below the element(s) it uses in the markup, e.g.:

   <input type="button" id="add_button" value="Add">
   <!-- ... -->
   <script src="add.js"></script>
   

   Then when the browser runs add.js, the element will exist. The script tag could even be immediately after the button, but I'd usually remend the end of the file (e.g., just before the closing </body> tag), as indeed do the YUI folks.

2. Use another ready handler in add.js (you can have as many as you like):

   // add.js gets its *own* ready handler
   $(document).ready(function() {
       $('#add_button').click(function(event){
        alert('hello');
       });
   });
   

Wrap the handler code in a .ready as well in add.js. That way, you are sure that the DOM is ready and the button exists before you actually attach the handler to it.

Here's a shorthand .ready()

$(function() {
    $('#add_button').click(function(event){
       alert('hello');
    });
});

always use document.ready to attach event handlers. the external js fuiles are processed at the same time as the html, css and other imported data.

index.js

function myClickEvent(event) {
 alert('hello');
}

add.js

$(document).ready(function() {
$('#add_button').click(function(e){
      myClickEvent(e);
    });
    });

Why your logic does not work? You are trying to create an self function inside document's ready state which wont be avialable anywhere, since it is executed as soon as the document reaches ready state.

You have to have your functions define somewhere which you can reference whereever you want! The best way is always declare them on top, and utilize anywhere even inside the document ready function.

$('#add_button').click([]) also might not work due to the reason that sometimes in some browsers you cant determine what has been loaded and whats not! If you keep that also inside "ready" you will get it right! It works perfect!

本文标签： javascriptClick event handler and ready handler defined in different js filenot workingStack Overflow