Develop Reference

Checking if an element has a specific class in jquery not works

I am stopped up with a very simple functionality that worked with me many times back but not working right now.No specific errors in console also.
I am trying to check if there is a specific class for a div containing .form-content.inactive classes.I am trying to find if there is another class opened .
My codes are below mentioned
$(document).ready(function() {
if($('.form-content.inactive').hasClass('opened')){
$(".form-content a").click(function(event) {
alert('has');
});
}
});
No alerts are given on click.I am stupid now for a while :p

If your div hasn't the class opened from the beginning, you should do it this way.
$(document).ready(function() {
$(".form-content a").click(function(event) {
if($('.form-content.inactive').hasClass('opened')){
alert('has');
}
});
});
Otherwise your code could work.. When your div has the class opened already before the document became ready, only then jQuery is able to subscribe your click element to the event.
$(document).ready(function() {
if ($('.form-content.inactive').hasClass('opened')) {
$(".form-content a").click(function(event) {
alert('has');
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Click!</a>
</div>

Instead of checking for opened you could use a delegate:-
$(document).ready(function() {
$('body').on('click', '.form-content.inactive.opened a', function(event) {
alert('has');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-content inactive opened">
<a>Link</a>
</div>
This will fire the click event for a if the .form-content has both classes .inactive and .opened.
If you insist on using hasClass and you have multiple .form-content then you should use this to get the closest .form-content and check for both classes.
$(".form-content a").click(function(event) {
var formContent = $(this).closest('.form-content');
if(formContent.hasClass('inactive') && formContent.hasClass('opened')){
alert('has');
}
});

JQuery.hover() not working when hovering over tile

I'm trying to add some functionality when hovering over a 2048 tile. Each tile of value n has a class 'tile-n'.
For the basic 'tile-2' tile, I have the hover functionality:
<script>
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
</script>
But nothing is happening and I don't believe the hover is being registered and I'm not sure why.
My implementation can be seen at: http://kpscript.github.io/PCN-Embark-2048/
The 'tile-2' div can be seen at: html.body.container.game-container.tile-container.tile-2.
Of course, I plan to do more non-trivial things with hover, but for now I can't even get the alert to show.

Try like this, It works for me...
$("body").on('mouseenter', '.tile-2', function () {
alert("in!");
}).on('mouseleave', '.tile-2', function () {
alert("out!");
});

I think you load html using ajax, this should work
<script>
$( "body" ).on('hover','.tile-2',
function(){
alert("in!");
}, function() {
alert("out!");
}
);
;)

You are trying to bind the event to the element before the element is rendered on the page. Wait until its loaded.
$(document).ready({
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
});

Can't hide element on click for some reason

I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?

I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/

I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});

It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle

As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});

Why my click not work as expected?

I just try this code:
$("#test").ready(function() {
$(this).click(function() {
alert('clicked!');
});
});
Fiddle here: http://jsfiddle.net/8bfqw/
Why it's still alert when I click outside of the div?

It's because your selector $(#test) is actually $(document) since from the docs:
The .ready() method can only be called on a jQuery object matching the
current document
Whatever you pass inside the selector, it'll be omitted and work on the current document. A shorthand version of $(document).ready(function(){}) is $(function(){}); so you want:
$(function() {
$('#test').click(function() {
alert('clicked!');
});
});

$("#test").ready(function() {
$("#test").click(function() {
alert('clicked!');
});
});

$("#test").ready(function() {
$("#test").click(function() {
alert('clicked!');
});
});
You have to set the click-function to the Test-object, instead of the whole document $(this).

jquery on() with addClass/removeClass

I have this script which needs to work on an ipad. It was working on chrome with live, however, moving it to on makes it unresponsive.
Any ideas, I would be grateful!
$("#clickAll").on("click", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$("#clickAll.active").on("click", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});

try this
$("#clickAll").on("click", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
updated
as suggested
$(document).on('click',"#clickAll", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
since it was working with live() i assume your element with id clickAll is added dynamically so try this
$(document).on("click","#clickAll", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$(document).on("click","#clickAll.active", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
you can replace the $(document) selector with your closest element to #clickAll element which will be more efficient

This will delegate the event to the body and it will be caught when it bubbles up the DOM.
$('body').on("click", "#clickAll", function(){
$(".welcome1poi").show();
$(this).addClass("active");
});
$('body').on("click", "#clickAll.active", function(){
$(this).removeClass("active");
$(".welcome1poi").hide();
});

Are you adding and removing the "active" class in order to create a toggle effect? If so, try .toggle(), like so:
$('#clickAll).toggle(
function() { $('.welcome1poi').show(); },
function() { $('.welcome1poi').hide(); });