jQuery: Not firing event after click - javascript

In action: http://3.alphenweer.nl/weer/
Code:
$(document).ready(function(){
$('.categorie[data-cat]').click(function(){
$('#cat-'+ $(this).attr('data-cat')).slideToggle('slow');
});
});
<span class="categorie" data-cat="nieuws">Nieuws</span>
<div class="box" id="box-nieuws">
Alphen
Nederland
</div>
Problem: When i click on a menu button (In the example: click on 'Neerslag' or 'Satteliet') nothing happens. I think the selector isn't correct, but it should be. Can you guys help me?

I think you're a bit confused. It appears that you want to use the data attribute of the clicked .categorie to slideToggle the corresponding element. So, you can do:
$('.categorie[data-cat]').click(function(){
$('div[id=box-"' + $(this).attr('data-cat') + '"]').slideToggle('slow');
});
or, assuming a structure consistent with the one you have posted, it can be simpler:
$('.categorie[data-cat]').click(function(){
$(this).next(".box").slideToggle('slow');
});

Already found the problem:
$(document).ready(function(){
$('.categorie[data-cat]').click(function(){
$('#cat-'+ $(this).attr('data-cat')).slideToggle('slow');
});
});
In the third line, $('#cat-' ... should've been $('#box-'

Related

JavaScript event execute immediately after bind? [duplicate]

I have a link:
<ul id="titleee" class="gallery">
<li>
Talent
</li>
</ul>
and I am trying to trigger it by using:
$(document).ready(function() {
$('#titleee').find('a').trigger('click');
});
But it doesn't work.
I've also tried: $('#titleee a').trigger('click');
Edit:
I actually need to trigger whatever get's called here <a href="#inline" rel="prettyPhoto">
If you are trying to trigger an event on the anchor, then the code you have will work I recreated your example in jsfiddle with an added eventHandler so you can see that it works:
$(document).on("click", "a", function(){
$(this).text("It works!");
});
$(document).ready(function(){
$("a").trigger("click");
});
Are you trying to cause the user to navigate to a certain point on the webpage by clicking the anchor, or are you trying to trigger events bound to it? Maybe you haven't actually bound the click event successfully to the event?
Also this:
$('#titleee').find('a').trigger('click');
is the equivalent of this:
$('#titleee a').trigger('click');
No need to call find. :)
Sorry, but the event handler is really not needed. What you do need is another element within the tag to click on.
<a id="test1" href="javascript:alert('test1')">TEST1</a>
<a id="test2" href="javascript:alert('test2')"><span>TEST2</span></a>
Jquery:
$('#test1').trigger('click'); // Nothing
$('#test2').find('span').trigger('click'); // Works
$('#test2 span').trigger('click'); // Also Works
This is all about what you are clicking and it is not the tag but the thing within it. Unfortunately, bare text does not seem to be recognised by JQuery, but it is by vanilla javascript:
document.getElementById('test1').click(); // Works!
Or by accessing the jQuery object as an array
$('#test1')[0].click(); // Works too!!!
Since this question is ranked #1 in Google for "triggering a click on an <a> element" and no answer actually mentions how you do that, this is how you do it:
$('#titleee a')[0].click();
Explanation: you trigger a click on the underlying html-element, not the jQuery-object.
You're welcome googlers :)
If you are trying to trigger an event on the anchor, then the code you have will work.
$(document).ready(function() {
$('a#titleee').trigger('click');
});
OR
$(document).ready(function() {
$('#titleee li a[href="#inline"]').click();
});
OR
$(document).ready(function() {
$('ul#titleee li a[href="#inline"]').click();
});
With the code you provided, you cannot expect anything to happen. I second #mashappslabs : first add an event handler :
$("selector").click(function() {
console.log("element was clicked"); // or alert("click");
});
then trigger your event :
$("selector").click(); //or
$("selector").trigger("click");
and you should see the message in your console.
Well you have to setup the click event first then you can trigger it and see what happens:
//good habits first let's cache our selector
var $myLink = $('#titleee').find('a');
$myLink.click(function (evt) {
evt.preventDefault();
alert($(this).attr('href'));
});
// now the manual trigger
$myLink.trigger('click');
This is the demo how to trigger event
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
</script>
</head>
<body>
<input type="text" value="Hello World"><br><br>
<button>Trigger the select event for the input field</button>
</body>
</html>
This doesn't exactly answer your question, but will get you the same result with less headache.
I always have my click events call methods that contain all the logic I would like to execute. So that I can just call the method directly if I want to perform the action without an actual click.
For links this should work:
eval($(selector).attr('href'));
You should call the element's native .click() method or use the createEvent API.
For more info, please visit: https://learn.jquery.com/events/triggering-event-handlers/
We can do it in many ways...
CASE - 1
We can use trigger like this : $("#myID").trigger("click");
CASE - 2
We can use click() function like this : $("#myID").click();
CASE - 3
If we want to write function on programmatically click then..
$("#myID").click(function() {
console.log("Clicked");
// Do here whatever you want
});
CASE - 4
// Triggering a native browser event using the simulate plugin
$("#myID").simulate( "click" );
Also you can refer this : https://learn.jquery.com/events/triggering-event-handlers/
Shortest answer:
$('#titlee a').click();

jquery on change after ajax being called twice [duplicate]

I have a form with some input and select boxes, each has class="myClass". I also have the following script:
$(document).ready(function() {
$(".myClass").change(function() {
alert('bla');
})
});
I dont understand why after each change in select box or input box, this function is being called twice.
What's wrong here?
Appreciate your help!
All I can think of is that you used the same class on the form itself. if so, remove the myClass style from your form tag.
Corrected :
http://jsfiddle.net/rY6Gq/1/
Faulty one with double alert:
http://jsfiddle.net/rY6Gq/
e.stopImmediatePropagation(); is what worked for me.
$(document).ready(function() {
$(".myClass").change(function(e) {
e.stopImmediatePropagation();
alert('bla');
})
});
Its a bug,
You'd add
$("#some_id").unbind('change');
before any change call
It happens when the same class or whatever attribute you are binding also has the same name parent or child. Obviously, when you change a child, parent also gets changed (its child changes). If they have the same class or attribute, it should fire twice.
For example, in the following if you bind to "myClass", it will be called twice.
<div class="myclass">
<select class="myClass"> </select>
</div>
if this occurred in IE, it may be this bug as it was for me:
http://bugs.jquery.com/ticket/6593
updating to jQuery 1.7.1 worked for me.
For me - I had written the on change event inside a function.
Moving it to $(document).ready(function () {}); solved my case.
change like this
$(document).ready(function() {
$(".myClass").unbind('change');
$(".myClass").change(function() {
alert('bla');
})
});
It isn't: http://jsfiddle.net/nfcAS/
The only one that worked for me was unbind before the change check.
$(".select2Component").unbind();
$(".select2Component").change(function() {
//code
});
Try debugging the code in Firebug rather than alerting. It may be loosing the focus and returning it is causing the appearance of two changes when there isn't two happening

How to call click() for element?

I am using a lightgallery plugin where the click event is defined as:
$(document).on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
self.start($(event.currentTarget));
event.preventDefault();
});
However, when I try to call the event like this:
$(".catalog-content a[data-lightbox='test']").first().trigger('click');
... it doesn't seem to work. What am I doing wrong? How can I trigger the click event?
Example jsFiddle
To "simulate a click" using jQuery, you are correct in that you can just use the .trigger(...) method:
$(".myClass").trigger("click");
The real issue is that you are "clicking" something that doesn't exist. There is no ".catalog-content a[data-lightbox='test' element. As Velthune suggests, you can add the .catalog-content class to the div container to fix this; however, note that there also is no a[data-lightbox='test'] element.
Instead, in your Fiddle you define the following:
<a href="http://..." data-lightbox="350xi" id="test">
something
</a>
So you actually just want to click on the first a element with a data-lightbox attribute of "350xi":
$("a[data-lightbox='350xi']").first().trigger("click");
Hey i have gone through the jsfiddle and updated it please go through it..
$(document).ready(function() {
$(".cars-container a[rel!='']").click(function() {
var rel = $(this).attr("rel");
$(".cars-container a[data-lightbox='" + rel + "']:first").trigger('click');
});
});
click below jsfiddle link to see the working example:-
http://jsfiddle.net/wHJ8E/3/
Your code in fiddle can't work.
1) Either use a different selector as Devendra suggested.
2) Or add the .catalog-content class to the div container:
<div class="cars-container catalog-content">
Fiddle
3) Both Devendra and I can't understand.

Why the jQuery remove is adding an extra element in the dropdown?

See this fiddle..
HTML:
<select>
<option>hey1</option>
<option>hey2</option>
<option>hey3</option>
<option>hey4</option>
<option>hey5</option>
</select>
jQuery:
$(document).ready(function () {
$('select').on('click',function(){
$("option:first",this).remove();
$(this).unbind('click');
});
});
When I run the above code in google Chrome(latest version), the first element is removed but it appends an extra element at the bottom. Why is it behaving like that.
Any ideas? pretty unexpected ..
EDIT:
This picture is for the ones who are not able to see any error..
Looks like a rendering bug in Chrome. You can't actually click on the last hey5 and the DOM doesn't actually create a second one. You can get around this via mousedown:
$('select').one('mousedown',function(){
$("option:first",this).remove();
});
jsFiddle example
I'm pretty sure it's a bug, another fix is using focus event :
$('select').on('focus', function(){
$("option:first", this).remove();
$(this).unbind('focus');
});
fiddle: http://jsfiddle.net/F8E7L/

Using jQuery show() / hide()

I am using show() and hide() in my jsp page, and it is working fine, but I am having trouble figuring out a way to hide my table once it is shown. HTML EX:
<button id="b1">show 1</button>
<button id="b2">show 2</button>
<div class="hidden" id="d1">
<div class="hidden" id="d2">
So basically I want to show div1 when button1 is clicked, and show div2 when button2 is clicked. I am using hide()/show() because I never want both to show at the same time. So here is my script:
$('#b1').click(function(){
$('#d1').show();
$('#d2').hide();
});
$('#b2').click(function(){
$('#d2').show();
$('#d1').hide();
});
So this works fine, as far as showing only one at a time, but I want to add some script to this to make it where if div2 is showing, I can click on button2 and make div2 hide, and the same thing for div1. I know this is confusing so if you have any questions please ask. thanks.
I think you want this:
$('#b1').click(function(){
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d2').toggle();
});
If you need to still make it so that only one can be shown then probably something like this:
$('#b1').click(function(){
if($('#d1').toggle().is(":visible")){
$('#d2').hide();
}
});
$('#b2').click(function(){
if($('#d2').toggle().is(":visible")){
$('#d1').hide();
}
});
I think you need this
$('#b1').click(function(){
$('#d2').hide();
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d1').hide();
$('#d2').toggle();
});
You don't need to check anything, just toggle the first one and always hide the other one
$('#b1').click(function(){
$('#d1').toggle();
$('#d2').hide();
});
$('#b2').click(function(){
$('#d2').toggle();
$('#d1').hide();
});
There's a toggle() method that you can use instead of show/hide that will do this for you.
With no parameters, the .toggle() method simply toggles the visibility
of elements:
Source: http://api.jquery.com/toggle/
$('#b1').click(function(){
$('#d1').toggle();
});
$('#b2').click(function(){
$('#d2').toggle();
});
if you don't use any animation, it is probably more useful to define a class in css, say, .hidden {display:"none"} and toggle it.
Thus, you code can be something like this:
$("#b1, #b2").click(function() { $("#d1, d2").toggleClass("hidden") })
Try this one, if you want, and tell us, whether it works )
You can check if something is visible by this $('#someDiv:visible') and then do appropriate handling.

Categories