Develop Reference

Jquery Click not working in IBM Mobile first

Below is the code i have added in main.js file
$(function(){
$(".menuHorizontal div").click(function(){
console.log('hi');
});
});
Below is my html DOM structure
<div class="menuHorizontal">
<div class="yellow-borBottom">All</div>
<div>Elevators</div>
<div>Escalators</div>
<div>Walkways</div>
</div>
my jquery click function wont works, no event on click. not even it shows error in console. plz help me to resolve this
I have added a seperate Jquery file too but still wont works

The way that you have this scoped attaches an event to all div's contained within a div assigned class menuHorizontal. In the code that you posted, there are none of these!
<div class="menuHorizontal">mush be close with</div> // No divs inside here!
You closed the div with class menuHorizontal too soon. Two options below. The former will also attach the event to the "mush be close with" text, while the latter will not.
<div class="menuHorizontal">
<div>mush be close with</div>
<div class="yellow-borBottom">All</div>
<div>Elevators</div>
<div>Escalators</div>
<div>Walkways</div>
</div>
<div class="menuHorizontal">>mush be close with
<div class="yellow-borBottom">All</div>
<div>Elevators</div>
<div>Escalators</div>
<div>Walkways</div>
</div>
Were you trying to scope like this, which attaches the event to div's with class menuHorizontal?
$("div.menuHorizontal").click(function(){
console.log('hi');
You might also want to change your scope to the higher level div, like so. Google event bubbling for more info
$(".menuHorizontal").click(function(){
console.log('hi');
Also, consider using jQuery .on(), as follows. It's a little more current, and generally more flexible.
http://api.jquery.com/on/
$(function(){
$(".menuHorizontal div").on('click', function(){
console.log('hi');
});
});

$(".menuHorizontal div").click(function(){
console.log('hi');
});
This does not work because in your HTML <div class="menuHorizontal">mush be close with</div> you dont have a div inside of the div .menuHorizontal so the event is not binded on any div ( as it doesn't exist). So you can do as below.
Change your HTML to
<div class="menuHorizontal">mush be close with
<div class="yellow-borBottom">All</div>
<div>Elevators</div>
<div>Escalators</div>
<div>Walkways</div>
</div>
And the existing jquery must work fine.
And here is Working Fiddle

jQuery onclick load randomly working with firefox

So I have a few "boxes" with an onclick function:
<div class="box" onclick="load(1);return false;"></div>
<div class="box" onclick="load(2);return false;"></div>
The onclick functions trigger a function that reads the content of a few seperate .php files (example1.php and example2.php).
These files contain other boxes made with fieldset instead of a div.
function load(num){
$("#loadthis").load("example"+num+".php");
}
And the function above is changing the content of this div down here:
<div id="loadthis">Load my fieldset boxes</div>
So far everything works, until I click on the fieldset boxes.
The background color of the fieldset should change when I click it and the radio inside the fieldset should be selected too (because of css styling), but both of this does not happen. But I can still select the radio when clicking the radio (not the box).
I have tested it in IE and in Chrome, this code works there most of the time.
But in firefox I cannot select the fieldset box 50% of the time.
I tried to experiment with the .on( class but it gives me the same effect.
$('fieldset.type-a').children('.row').children('.box.col-4').on("click", load);
function load(){
var index = $('fieldset.type-a').children('.row').children('.box.col-4').index( this );
index+=1;
$("#loadthis").load("fs"+index+".php");
}
Okay so after some searching I found that there is already an onclick function in a different .js file that being called:
function handleStep2() {
$('.step-form-2 input[type=radio]').change(function () {
$(this).closest('fieldset').find('.box').removeClass('active');
$(this).closest('.box').addClass('active');
$(this).attr('checked', 'checked');
});
$('.step-form-2 .select-box .box').click(function () {
$(this).find('input[type=radio]').trigger('change');
});
}
I am now going to try to merge the codes and see if that gets rid of the bug with the active class not being activated on click.
SOLVED: I solved it by indeed merging both the codes to 1 click function. Thanks for all your help guys, But I still wonder if this could be done a different way?

Look into event delegation, and if you're using jQuery it's easy
look into the jQuery API for .on(
Also you want to make sure you're using unobtrusive JS, so pull that out of your HTML, put it in a .js file as an event listener and load the script after the DOM has loaded as the last thing before your closing </body> tag

It should be a delay about loading php files content.
Is it work when you click one of them even takes time?
Maybe you should ajax for loading php files. By the way you can send data to php files using GET or POST methods.
You can check this examples.

If your function is initalized in an IIFE, inline js can´t access this function.
It´s weird that you say this sometimes works..
IIFE is a wrapper function to create capsules, so the client can´t modify your script in runtime.
Looks like this:
(function(){
/* code */
}());
It would be much better to create js-events:
on('body', 'click', '.box', function(e) {
console.log(e.target); // this is the clicked list item
});
Hope it helps..

How is it possible that the jQuery works on Chrome console, but does not itself?

I would like to make a overlay when the uses make hover event on a link.
This part ok, the overlay created and everything fine.
But I also would like to remove this overlay, when user click (or hover) for it, and this part create a strange bug.
I try clicking for the overlay and its dosen't close, nothing happening, but if you paste script to the chrome console, this working fine.
Js, first part, add script:
var overlay = jQuery('<div class="overlay"> </div>');
$("#link-'.$myqlVideoID.'").hover(function() {
$("#hover-").attr("src","http://youtube.com/embed/'.$myqlVideoID.'?autoplay=1");
$(".drop-target").css("background-color","#070707");
$(".drop-target").css("padding","11px");
$(".drop-target").css("margin-bottom","16px");
$(".drop-target").show().fadeIn("3000");
overlay.appendTo(document.body)
});
And the second part, remove overlay:
$(document).ready(function() {
$(".overlay").click(function() {
$("#hover-").removeAttr("src");
$(".drop-target").hide().fadeOut("3000");
$(".overlay").remove();
console.log("clicked");
});
});
My site is where you can see the bug:
http://neocsatblog.mblx.hu/search/
Just search something and scroll down to "Cimkék"

Try delegating the event on the overlay by writing the following:
$(document).on('click', '.overlay', function () {
//The rest of your code
}) ;
And same for the rest of your event handlers.
The reason for this is that the element overlay is being added dynamically, and the script doesn't know about it at the moment when it's being instantiated.

jQuery .click() not working (debugging)

I am new to jQuery and am making a few .click() functions for my website, but no matter what I try, I can't get them to work.
jquery:
$(document).ready(function(){
$("#underlay-img-container-btns-add").click(function(){$("#underlay-img-container-form-file").click();});
$("#underlay-img-container-btns-submit").click(function(){document.forms['underlay-img-container-form'].submit();$("#underlay-img-container-general_loader").css("display","inline-block");});
$("#underlay-img-container-form-file").change(function(){readURLImg(this);});
$("#underlay-gif-container-btns-add").click(function(){$("#underlay-gif-container-form-file").click();});
$("#underlay-gif-container-btns-submit").click(function(){document.forms['underlay-gif-container-form'].submit();$("#underlay-gif-container-general_loader").css("display","inline-block");});
$("#underlay-gif-container-form-file").change(function(){readURLImg(this);});
});
readURLImg (displays an image preview before submission. This is part of a file uploading script.):
function readURLImg(input){if(input.files&&input.files[0]){var reader=new FileReader();reader.onload=function(e){$("#underlay-img-container-preview").attr("style","background-image:url("+e.target.result+");color:#fafafa");}
reader.readAsDataURL(input.files[0]);}}
I am sure my ids are correct. I have been trying to find the answer for hours with no success.

i have checked your website
then I've clicked on button upload you picture > opened the terminal and test
$("#underlay-img-container-btns-add").click(function(){alert('btn clicked')})
and the results appears
So, your problem is to call the events when the popups are ready
to Understand the concept
close the popup and try the same code it will retrieve empty array '[]'
<div class="btn" id="green" >
<div class="icon-image"></div>
<span>Upload your picture</span>
</div>
and add
$('.btn#green').click(function() {
$('.overlay').html($('.overlay').html().replace(/!non_select_tag!/g, 'img'));
$('.overlay').html($('.overlay').html().replace(/!non_select_txt!/g, 'Picture'));
// add you events
$("#underlay-img-container-btns-add").click(function(){alert('btn clicked')})
$('.overlay').show();
})
this will work

try
$("#underlay-img-container-btns-add").on( 'click', function () { ... });
may not work because content is dynamically created.

try
$("#underlay-img-container-btns-add").bind( 'click', function () { ... });

To bind events to dynamically generated elements in DOM, you may use
$('document').on( 'click', '#selector', function () {
...
});
This binds event to the DOM rather than to the element directly, which may not exist all the time.

try
$("body").delegate("#underlay-img-container-btns-add",'click',function(){
....
});

Why i can not trigger the jquery function?

This is a button to close the click but it fail and not work. I would like to know what is the tab ID since i did not think i assign one when i create a tab.
Thank you.
This is my attempt
js
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
html
<input type="button" id="closeTab" value="Cancel" class="submit"/>
I found my js code is working but the button can not trigger it? Why? thank you
latest try:
<script>
$(document).ready(function(){
$("#addlist").validate();
});
$(function(){
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
});
</script>
It still doesn't work so i think it is because the upper function ? How to fix this?
================================================================================
Also, are there any ways to clear my session in using this jquery function (what should i add for instance)?**Thanks

With javascript, you have to delay the execution of certain functions (like event handlers) until the page loads fully. Otherwise, it is attempting to bind a function to an element that doesn't yet exist. With jQuery, you can pass a function to jQuery to be executed on page load very easily like this:
$(function(){ /* code goes here */ });
So to use this with your code, you would do this:
$(function(){
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
});
This way, when the jQuery attempts to bind the function to #closeTab, it happens after the page has loaded (and after #closeTab exists).

Do you have any errors in the console?
Do you include jQuery before that click binding?
Try changing the window.parent.... to alert('clicked!'); and make sure you're actually getting there.
Also, make sure the click binding is inside of a:
$(document).ready(function(){
// here
});

A script can close only the windows it creates. It cannot close the tab which it didn't create.
To rephrase, cannot close tab only if unless but when created tab by script which is same that close window.
I hope this makes sense.

Maybe the form is submitted and the browser navigates to another URL before the code could run? Try replacing function() with function(e) and adding e.preventDefault(); to the beginning of the event handler.