Why my click not work as expected?

Why my click not work as expected? - javascript

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).

Related

jquery mouseover() isn't working

I've got this bit of jquery which is meant to add class called "wow rubberBand" which is a special class that gives an animation to the element.
However for some reason the animation isn't kicking in.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="wow.min.js"></script>
<script>new WOW().init();</script>
<script type="text/javascript">
$(document).ready(function() {
$("header").mouseover(function() {
$(this).find("span").addClass("wow rubberBand");
})
$("header").mouseout(function() {
$(this).find("span").removeClass("wow rubberBand");
});
});
</script>

Use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> on the top of the page

There are some basic syntax errors in your code, as #Andreas commented, instead of $(this).attr("class","wow rubberBand"); and $(this).attr("class","");
use
$(this).addClass("wow rubberBand"); and $(this).removeClass("wow rubberBand");

You can chain your mouse events like this:
$thing = $('.thing'); // 'query' for this dom element and cache it - you can do this with your span things for example...
$thing
.on('mouseenter', function() {
$(this).addClass("active");
})
.on('mouseleave', function() {
$(this).removeClass("active");
})
;
// this is the same...
$('.hover-thing').hover( function() {
$(this).toggleClass("blue");
});
https://jsfiddle.net/sheriffderek/b5y6mrb0/
You could also use .hover() or CSS :hover - depending on what you are doing. I very rarely find myself reaching for mouseenter
Despite the comments: $(this).attr('class', ''); and $(this).attr('class', 'className'); - are totally valid ways of changing a class attr. The negative part is that you'll clobber any existing classes if you remove al of them - so removeClass() is a helper that checks for that particular class in the array of classes and removes just that one.

I think it might be because you have to attach the eventhandler on the document, or maybe its just an syntax error ("header" should be ".header")
(function ($) {
$( document ).on( 'mouseenter', '.header', {}, function( e ) {
console.log( "hover" );
});
})(jQuery);

How to have multiple functions in jQuery ready?

I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?

Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")

You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});

You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/

you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>

Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});

concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>

If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});

jquery .on(click) not working

i have a link on html
Veja aqui »</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically

Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle

If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});

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(); });

JQuery: .index() returns -1

Here's main part of html:
<div id="table">
<div class="table_item">asd</div>
<div class="table_item">asd</div>
<div class="table_item">asd</div>
</div>
And JS (JQuery):
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($("#table").index($(this)));
});
});
click handling works but I ALWAYS get -1 from .index.
trying simply $(this).index(); shows the same result.
Please help! What's wrong with the code?

Do this instead:
$(document).ready( function()
{
var ti = $('.table_item');
ti.click( function()
{
alert(ti.index(this));
});
});
EDIT: Someone had a post that was deleted that was correct, and I think a little better than my code above:
$(document).ready( function()
{
$('.table_item').click( function()
{
alert($(this).index());
});
});
Working examples of both solutions: http://jsfiddle.net/FishBasketGordo/rx5e7/

You need to call index on a collection, in this case divs with class table_item
alert($(".table_item").index(this));

Since you are attaching a click() listener to $(".table_item"), you can reference the object by using $(this).
Try:
$(document).ready( function()
{
$(".table_item").click( function()
{
alert($(this).index());
});
});

Develop Reference

JavaScript is the programming language of the Web.

Why my click not work as expected? - javascript

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?

$("#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).

Related

jquery mouseover() isn't working

How to have multiple functions in jQuery ready?

jquery .on(click) not working

jquery on() with addClass/removeClass

JQuery: .index() returns -1

Categories

Resources