If I have some code like this:
jQuery(document).ready(function() {
jQuery('body').on('mouseup', '.some-div', function(e){
});
});
Is it possible to trigger the mouseup event outside the (document).ready() with
jQuery('.some-div').mouseup();
or should I write this code
jQuery('body').on('mouseup', '.some-div', function(e){
});
as a function outside the (document).ready()?
I don't think dependency matters as much as loading order of the whole file. $(document).ready ensures that jQuery waits to execute the main function until
the page Document Object Model (DOM) is ready for JavaScript code to execute.
Code outside this ready block might (be tried to) run before the page is actually ready. For instance, let's say this is code that's in the head of your page:
<script>
jQuery(document).ready(function() {
jQuery('body').on('mouseup', '.some-div', function(e){
});
});
jQuery('.some-div').mouseup();
</script>
The ready block will wait, as described above, but the mouseup trigger will try to fire, but it can't. The DOM isn't ready yet, which means .some-div can't be found yet - and thus, the trigger can't be activated.
To improve the chances that DOM is ready, you can try to load your jQuery before the closing </body> tag. The ready block can stay in the head, but the trigger should then move to the end of the document to improve the likelihood that the DOM is ready (which it normally should at that stage). For an interesting read on where to place script tags, also see this highly popular post.
Yes it's possible to trigger mouseup outside $.ready() using
jQuery('.some-div').mouseup();
But remember to call it after $.ready gets executed. In practice it requires another $.ready handler or just the invocation in the same one at the end.
jQuery('.some-div').mouseup(callback); writing this outside of document ready does not ensure document is ready before event is being attached to a document element. It may happen jQuery('.some-div') is not there before we are trying to access and attach an event listener.
jQuery(function() {
jQuery('body').on('mouseup', '.some-div', function(e){
});
is equivalent to
jQuery(document).ready(function() {
jQuery('body').on('mouseup', '.some-div', function(e){
});
});
Both the ways are good to ensure availability of dom elements before access.
Once the event is attached you can trigger any time. But you should always make sure document is ready.
Once .ready() is executed and event is binded, you can call it outside of that function.
Try this :
$(document).on('mouseup','.some-div',function(){
//code there
});
