jquery binding click for label firing twice - javascript

When i added one select into label and binding for click event, jquery fires twice.
http://jsfiddle.net/d8Ax7/
html:
<label class="lol">
<div>
bla
</div>
<div style="display:none;">
<select></select>
</div>
</label>
javascript:
$("label.lol").on({
click : function ()
{
alert(1);
}
})
How can i fix this bug without adding "for" attribute to labels?

I know there are already many answers to this question but are vague.
$("label.lol").on({
click : function ()
{
alert(1);
return false;
}
});
Ok, Everyone appreciated. Problem Solved. But Question arises Why return false;.
Answer In Simple Words: It is a way of telling computer that return from the function, the task i gave to you is completed. No more Mess now.

You could try using the label's "for" attribute to link it to a select outside of it. See my example
<label for="test" class="lol">
<div>
bla
</div>
</label>
<div style="display:none;">
<select id="test"></select>
</div>
http://jsfiddle.net/d8Ax7/1/

$("label.lol").off("click").on(//...
but if it's firing twice it surely means you have bound it twice so using .off is more a hack than the best solution to your problem which would be to understand how you end up binding twice this event... & surely the code you show doesn't explain this double bondage
edit : & in your fiddle it does indeed trigger only once...

This way it works too but I'm don't fully understand what you're trying to do...
And a label should only contain a label text for the select and not contain the select himself..
$("label.lol div:first").on({
click : function ()
{
alert(1);
}
})

There are two options when overriding the click check out this stack overflow question for greater detail, but to sum it up try this...
$("label.lol").click(function () {
alert(1);
return false;
});

Your markup is horrible.. Your problem is that jquery is doing the click event on each div inside your label function - means twice. You should clean ur markup and ask the div you want to be clickable directly.
Else use :first to make sure the event is only fired once:
$('.lol div:first').click(function ()
{
alert("1");
})

You should add e.preventDefault();
$("label.lol").on({
click : function (e)
{
alert(1);
e.preventDefault();
}
});

your problem is with your distinction between elements.e.g you should select the first child of label with :first-child selector, or give it an id:
HTML:
<label class="lol">
<div id="first-child">
bla
</div>
<div style="display:none;">
<select></select>
</div>
</label>
JS:
$("#first-child").on('click',function (){
alert(1);
});
http://jsfiddle.net/d8Ax7/5/

Try to filter with CSS: Add an intermediate class clicked that prevents the second alert (or whatever action) and than remove the .clicked to be ready for the next round.
$("label.lol").on({
click : function ()
{
if (! $(this).hasClass('clicked'))
alert(1);
$(this).toggleClass('clicked');
}
})

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

Click event not working first time

I have written a click function in jquery like below and experiencing some problem.
$(' #xxx').unbind('click').on('click', function () {
$('#xxx').removeClass('hide');
$('#xxx').toggle();
});
and the div for the click event is
<div id="xxx" class="hide"></div>
now when i click this div nothing appears. Only from the second click the toggle function takes place. Can anyone help me out with this please? I need the click from the first time. And most importantly i dont want the hide function while the page loads because My design breaks while loading and only when the loading is complete it looks nice.So how can i acheive it?
here is a working Fiddle of what you desire to do.. there is nothing wrong with your code, i dont know but maybe you forgot to import your jquery like this :
<script src="YOUR_JQUERY_PATH/JQUERY_FILENAME.js"></script>
$(' #xxx').unbind('click').on('click', function () {
// $('#xxx').removeClass('hide'); // <- remove this line
$('#xxx').toggle();
});
<div id="xxx" class="hide">aaaaaaaaa</div>
<script>
$(' #xxx').on('click', function ()
{
$('#xxx').removeClass('hide');
$('#xxx').toggle();
});
//Another method
$(' #xxx').click(function()
{
$('#xxx').removeClass('hide');
$('#xxx').toggle();
});
</script>
I ve tried many ways.But i still wonder y this isnt working. But when i modified my code like
<div id="xxx" style="display:none"></div>
$(' #xxx').on('click', function ()
{
$('#xxx').toggle();
});
it works like a gem.Anyway i got the output.Still in a confusion y my previous code hasnt worked.

jQuery: Not firing event after click

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-'

Need to add another onClick event

I have a checkbox, that is styled using onclick handler.
The issue I have is , I also want to fire a div simultaneously.. to display hidden message.
Kind of like: checkbox ( tick to go featured )
If ticked show featured div, else hide.
Code I have is:
<span id="checkboxWrap" class="styledCheckboxWrap"><input name="include" type="checkbox" id="checkbox" onclick="setCheckboxDisplay(this)" class="styledCheckbox" /></span>
Wanted to also fire the div like...:
onClick="toggle('feature');"
Can I chain onClick events to one click handler?
ie..
onclick="setCheckboxDisplay(this);toggle('feature');"
Or am I going round in circles.
Use event listeners. They're better anyway. :)
var check = document.getElementById('checkbox');
check.addEventListener('click', function () {
setCheckboxDisplay(this);
});
check.addEventListener('click', function () {
toggle('feature');
});
Ideally, you should try to start using unobstrusive javascript which basically means you separate the structure from function by moving your javascript inside a <script> tag or into a separate file. So your code would look like this and make it easier to read.
HTML
<span id="checkboxWrap" class="styledCheckboxWrap">
<input name="include" type="checkbox" id="checkbox" class="styledCheckbox" />
</span>
Script
<script>
$(function(){
$('.styledCheckbox').click(function(){
setCheckboxDisplay(this);
toggle('feature');
});
});
</script>
Yes, you can call multiple statements in the onclick attribute as long as they are semicolon-delimited. That gets unweildy though, so I'll usually define a new function to wrap the two into one call.
Just delegate this to a function that does all your work...
// Somewhere in the head of the file...
function doOnClickStuff(target) {
toggle('feature');
setCheckboxDisplay(target);
}
And then just have the onClick handler invoke that...
onClick="doOnClickStuff(target);"

jquery, div with table is not visible when I call show();

<div id="abclink">
+ click here to view
</div>
<div id="abctable" style="display: none;">
some text here, allot of text
</div>
So using jquery I try and do:
$("#abclink").bind("click", function() {
$("#abctable").show();
});
This doesn't work, and I don't know why?
you have to put a #
$("#abclink").bind("click", function() {
$("#abctable").show();
});
You might be missing the document.ready function. Also, it might be best to use toggle instead of show:
$(document).ready(function(){
$("#abclink").bind("click", function() {
$("#abctable").toggle();
});
})
I'm guessing #abclink doesn't exist at the point you're trying to bind the event. Are you doing it in the of the page? If so, try putting it in the document.ready event:
$(function() {
[your code]
});

Categories