Develop Reference

Javascript event handler (mouseover) not firing

I have a homepage that dynamically writes javascript in order to handle the mouseover of potential user choices. However, the .bind("mouseover",function()) does not seem to be working.
The PHP produces a script like this:
<script type="text/javascript">
function setPreview(art, title, rt, excerpt) {
$("#boxPreview").attr("src", art);
$("#selectedTitle").text(title);
$("#runningTime").text(rt);
$("#excerpt").text(excerpt);
}
$(document).ready(function() {
$("#tb0").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb1").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb2").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb3").bind("mouseover",setPreview(url,title,running time,excerpt));
</script>
However, it seems that the mouseover event never fires. Instead, it seems that when the page is fully loaded, setPreview is run for the very last element (#tb3).
I have no idea what I'm doing wrong. If you would like to see the page in action for yourself, you can view it here.

You may try writing the same code like this
$("#tb0").bind("mouseover" , function(){
setPreview(url,title,running time,excerpt);
});
This may solve your issue. Because i've got same issue before but it was fixed writing this way.

jquery html update working on computer but not on smartphone

I'm using following-like code on my website
<span class="box">
<noscript>
<img src="images/imagebox.png">
</noscript>
</span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
$(document).ready(function() {
$('span.box').html('<img src="images/imagebox.png">');
$(document).on('click','span.box', function(){
// rest of code
});
});
as you can see, i built it the way if the client has javascript, the content of is replaced by without link so it's more interactiv for the client and if the client has no javascript, he still has with the link the way he can still make the necessary action...
While this works perfectly without any trouble on the computer, on smartphone (at least mine), it doesn't work but i don't know why... actually, on my smartphone, i can't see the and can't do any action as if it wouldn't have javascript while it has... I have android 2.1 on my smartphone...
Do you know any solution or workaround for this, the way i can have this and necessary action ability even on smartphone?
Thanks in advance for your help!
EDIT: I finally opted for a solution like in JavaScript function in href vs. onclick

All mobile devices don't handle click events.. should be:
$('<img />').attr('src', 'images/imagebox.png').appendTo('span.box').bind('click touchstart', function() {
// handle click / touch
});
also see this post about double trgiggering issue in some touch enabled devices:
How to bind 'touchstart' and 'click' events but not respond to both?

try to use
$(document).on('pageinit', function(){}); or $(document).on('mobileinit', function(){}); instead of
$(document).ready(function(){});

Ext.onReady() vs $(document).ready()

Whats the difference? I have on $(document).ready function which should check if extjs is loaded but the main problem is extjs does not load on time and things inside $(document).ready starts to execute, extjs create function which produces the main error 'cannot execute create of undefined' on Ext.create("...", {..}); line. If i put double check like this:
$(document).ready(function() {
Ext.onReady(function() {
Ext.create('Ext.Button', {...});
});
});
Things magically work. Now I'm using ext-all.js which has ~1.3MB minified which is pretty large imho...and things get magically loaded while he does the second check...but I think those 2 functions are not the same as they definitions suggest, because if I put another $(document).ready instead of Ext.onReady() line, things break again. I think Ext.onReady({}); function does some other black magic which $(document).ready() does not, and I'm interested if someone knows what is this kind of magic?
Because it work's and I don't know why which is killing me.
Thanks for reading the post. =)
ps. I'm using ExtJS for about day so I'm pretty new to it.

No they're not the same, the first one will proc when your jQuery library is loaded, the Ext.onReady(.. will proc when your ExtJS library is loaded.
If you want to combine them you could do something like this:
var extReady = false;
var jQueryReady = false;
var librariesReady = function () {
if (jQueryReady && extReady) {
//They're both ready
}
};
$(document).ready(function () {
jQueryReady = true;
librariesReady();
});
Ext.onReady(function () {
extReady = true;
librariesReady();
});

Ext.onReady() and $(document).ready() have nothing to do about either library being loaded as the current accepted answer suggests.
According to the documentation both are about the DOM being loaded and ready.
Documentation
Ext JS: https://docs.sencha.com/extjs/6.7.0/modern/Ext.html#method-onReady
jQuery: https://api.jquery.com/ready/
An Answer to Your Case
It's possible that you're loading the Ext JS resource after your script fires, but jQuery is already loaded above your script. Thus using jQuery to wait until the DOM is loaded guarantees that the DOM has been loaded and thus by then Ext JS has also been loaded.
If you try to invert them and us Ext JS first you'll likely have an error.
According to the documentation they're doing the same thing so you shouldn't need to nest them
A Fix for this Scenario
If you are loading your resources like so:
jQuery
Your Script
Ext JS
It would be best to load them in this order:
jQuery and/or Ext JS
Order shouldn't matter as they can stand by themselves without requiring one or the other
Your Script
Additional Explanation
Due to how the DOM is loaded and parsed by the time it reads your script it guarantees that jQuery and Ext JS are available. This is why you can reference their libraries in your script; you're not waiting for them to load they're already there and available to be used which is why you can call them and use their ready calls.
You need to use the ready event of one of the libraries to guarantee that all elements are loaded into the DOM and available to be accessed. You also shouldn't try to add anything to the DOM until it's ready although you can append to current elements that have been loaded above your element/script tag. It's just best practice to not touch the DOM until it's finished loading.
Additional Explanation Nobody Asked For 🔥
Handling DOM ready is more involved than these libraries make it which is why they both include such an event handler.
The following link explains with vanilla JS how you cannot only add your event listener you also need to check if it has already fired when you go to add your event listener for DOM ready. This is a common case to handle with eventing - where you create a race condition where an event may fire before you start listening for it - then you don't know that it ever happened without another way to check.
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded#Checking_whether_loading_is_already_complete

They both check for when the DOM is ready.
If you need Ext to be loaded when using jQuery, try to invert the logic (don't know if it will work, haven't tried).
Ext.onReady(function() {
$(document).ready(function() {
Ext.create('Ext.Button', {...});
});
});
Another StackOverflow question on this subject: Extjs + jQuery together

jQuery 1.7.2: .on() works on one page and doesn't work on another

I've the following piece of code which works on one page and doesn't work on another though html markup is the same on both pages:
JS
$("#books_list").on('click', '.load-more-books', function(event) {
// Some stuffs
});
Html
<div id="book_list">
...
</div>
More books
Even after entering JS code in Chrome Browser console events not bound.
Can anyone help me with this, what am I doing wrong?
Thanks,
Sultan

The selector you specified means that .load-more-books needs to be a descendant of #book_list for this to work.

Upgrade to jQuery 1.8.1 and see the results

Does anyone know any people-based source code audit website/forum/comunity for JavaScript/jQuery?

Hello I'm writing a jQuery code for my application and got some issues (like function called once, running three times).
I must know if exist any site that people audit source code and comment my mistakes..
most of my code is like this i/e:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
$.openModal = function(foo,bar){
//do something
$('a.close').click(function(){
$('#modal').hide();
});
$('input.text').click(function(){
$.anotherFunction();
});
});
does am I doing something obviously wrong?

I'm not aware of any source code audit like that -- certainly not for free! This website is pretty good for specific problems though...
In this case, the problem is that you are continually binding more and more events. For instance, with the following code:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
This code says "whenever the user clicks on an a.openbox element, show all .box elements and bind a new click handler to all .box a.openModal elements". This means that you will add another handler to .box a.openModal every time you click on a.openbox. I can't believe this is what you want to do!
It is difficult to work out what the correct code should be without knowing the context and exactly what you want to happen. My advice for you in the first instance would be to do some reading up on Javascript events and event handlers, particularly as they are implemented in jQuery.