0

I define the same listener on document.ready in both an external script file and in-file. I have one in a central external file because I'll always want to perform the delete when clicking an element with class .delete, but sometimes I also want to do some other stuff.

//script.js
$(document).ready(function(){
    $('.delete').click(function(){
        //send AJAX delete
    });
});

//index.php
<script type="text/javascript">
    $(document).ready(function(){
        $('.delete').click(function(){
            var msg = "Are you sure you want to delete the <?=$item?>'"+$(this).attr("name")+"'?";
            if ( confirm(msg) ) {
                removeDataTableRow( $(this)... );
            }//fi
        });
    });
</script>

The listener in the external js file fires before the in-file script's listener, but I want the opposite (and I want to cancel the second event from the external file if confirm=false).

I thought of setting a variable in the in-file script and setting that variable in the external to know the result of the confirm, but the script in the external script still fires first, and as such the variable has not yet been properly defined :/

EDIT: I've read question 282245 which covers event precedence of different listeners, but not for occurrences of the same listener.

Community
  • 1
  • 1
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126
  • 1
    What is the order of the script tag that brings in the external file and the script tag that defines in-page JS? – machineghost Jul 27 '12 at 21:01
  • 1
    Also, quick tip: instead of `$(document).ready(function(){ ` you can just do `$(function(){`. – machineghost Jul 27 '12 at 21:02
  • @machineghost, the external js file is included in the `` element before the in-file script is defined (with CSS that establishes precedence of the latter-most). btw the head element is defined in a separate, central file and included via php so I can't really change the order (the in-file script needs to be defined per file). – Jakob Jingleheimer Jul 27 '12 at 21:04
  • What do you mean by "with CSS that establishes precedence of the latter-most"? CSS has nothing to do with JS load order. – machineghost Jul 27 '12 at 21:16
  • The handlers are fired in the order they have been added. If you want to bind them the other way round, then you have to change the order of the code. – Felix Kling Jul 27 '12 at 21:17
  • @machineghost, oh I know css has nothing to do with JS load order. I just noted it to explain my rationale. – Jakob Jingleheimer Jul 27 '12 at 21:18
  • 1
    possible duplicate of [jQuery Multiple Event Handlers - How to Cancel?](http://stackoverflow.com/questions/652495/jquery-multiple-event-handlers-how-to-cancel) – Felix Kling Jul 27 '12 at 21:20
  • @FelixKling, crap. Is there a way to get around that? I can't really change the order of when the external file is included without radically changing the architecture or decentralising the listener. – Jakob Jingleheimer Jul 27 '12 at 21:21
  • 1
    Maybe this helps: http://stackoverflow.com/questions/2360655/jquery-event-handlers-always-execute-in-order-they-were-bound-any-way-around-t ... but things might have changed a bit. – Felix Kling Jul 27 '12 at 21:21
  • @FelixKling sweet, thanks! wanna put those in an answer so I can approve it and close this question? – Jakob Jingleheimer Jul 27 '12 at 21:25
  • Well, since you found your answers in other posts, it would be more appropriate to close this as duplicate ;) There is no value in providing an answer that just links to other questions. – Felix Kling Jul 27 '12 at 21:26
  • @FelixKling i voted to close but it says it needs 3 votes. also this is a duplicate of 2 questions but it only let me links 1 :/ – Jakob Jingleheimer Jul 27 '12 at 21:36
  • @FelixKling actually, that `bindFirst` trick doesn't seem to work for listeners in different files :( – Jakob Jingleheimer Jul 27 '12 at 21:52
  • That has nothing to do with different files, you are working with the same DOM. The answer is for an older version of jQuery, maybe it has to be adjusted. – Felix Kling Jul 27 '12 at 22:00
  • @FelixKling I probably need to adjust it, but as it is, for whatever reason it definitely does not work when it different files: I tried cutting the `bindFirst`() out of the `index.php` and pasting it into `script.js` *after* the `.click()` and it worked just fine (but it didn't work when `bindFirst()` was in `index.php`. (also for my little experiment, I made sure to switch my jquery back to v1.4.2) – Jakob Jingleheimer Jul 27 '12 at 22:30

1 Answers1

1

Javascript run order is actually pretty simple. Unless you're using asynchronous code (eg. an event handler, and AJAX request, or a setTimeout) code is always ordered sequentially. In other words, the browser starts at the top of the page, runs everything in the first script tag it finds, moves on to the next script tag, etc.

Asynchronous stuff confuses matters a bit, but the general rule (in most libraries at least) is that the first handler to get hooked up runs first. So in this case, your external document.ready handler is going off because it comes earlier on the page than your in-page script tag.

machineghost
  • 33,529
  • 30
  • 159
  • 234