Fire next event up, but not after that - javascript

For a page, I've been given a link wrapped inside a label, like this:
<label for='checkbox_elem'>
Links to <a href='somepage.php' target='anotherwindow'>another page.</a>
</label>
When the user clicks on the link in all browser, the page is spawned in a new tab as envisioned, but in Firefox the checkbox linked to the label is also selected. This is a non-desired behavior.
I want to run some jQuery to allow the link to pop, but to kill the event thereafter. I have the following, which works, but isn't very elegant:
$(document).ready(function(){
$('label a').click(function(e){
open($(this).attr('href'), $(this).attr('target'));
return false;
});
});
Can any of you think of a more elegant way to do this than to replicate the element's behavior manually and kill the event?
As an aside, I've been trying with stopPropagation, but haven't had much success.
Also, please note that the above solution does work, but I am looking for something more elegant for generically stopping events from propagating past their first call. (The first native call. If I add a callback, I still want the native element behavior to fire, but not that of its parent) .


Try stopping the event from propagating at the label.
$(document).ready(function(){
$('label').click(function(e){
e.stopPropagation();
});
});


You could use $(elem).one(fn) -- http://api.jquery.com/one/


Maybe you should change your html to:
<label for='checkbox_elem'>Links to </label>
<a href='somepage.php' target='anotherwindow'>another page.</a>
and use no javascript at all?


This one:
<label> test Test <input type="checkbox" name="check[]" /></label>
Or even:
<label for="test1"> test Test <input type="checkbox" name="test1" id="test1" class="checkbox" /></label>
And js:
$('a').click(function(e){
var t=$(this);
window.open(t.attr('href'), t.attr('target'));
return false;
});
Works for me. Maybe there is smth that interfere with your script?


Well, if you are allowed to change the html on client-side, you can always move the links outside the label like this,
$(document).ready(function(){
$('label').find('a').each(function(){
var $anchor = $(this);
$(this).closest('label').after($anchor);
});
});​
demo


KISS
$(document).ready(function(){
$('label a').click(function(e){
open($(this).attr('href'), $(this).attr('target'));
$(this).parent().click(); //Click the label again to reverse the effects of the first click.
return false;
});
});


Try using .one() instead of .click():
$(document).ready(function(){
$('label a').one(function(e){
open($(this).attr('href'), $(this).attr('target'));
return false;
});
});

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

Too many unwanted result when calling jquery .change() function

I have a bootstrap toggle button in HTML like that:
<input id="warnbtn" type="checkbox" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger" >
and I try to catch the event of this with this script:
$(function() {
$('#warnbtn').change(function() {
var state = $(this).prop('checked')
if(state){
console.log("On");
}else{
console.log("Off");
}
})
})
My toggle is not smooth like the one in Bootstrap Toggle website
And the result I get with the .change function have lot of unwanted result like the picture here

It sounds like you are loading the same script numerous times. Every time you run that same block it adds a new change event listener and each will fire when the event occurs
You should find out why and try to prevent it
For a short term workaround you can call off() first to remove any previous event listeners that were called
Try:
$('#warnbtn').off('change').change(function() {
var state = $(this).prop('checked')
if(state){
console.log("On");
}else{
console.log("Off");
}
})

Thank u for answer my question :( I think I will replace the toggle button with another solution

How do i trigger input file manually?

<input type="text" />
<input type="file" />
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
I can get browse option (open dialog box) when I click the test box. But I cannot get browse option when I trigger text box's click using jquery trigger method.
$('input[type=file]').trigger('click');
How do i solve this?

What helped for me is to set the event-listener inside:
$(document).ready(function(){
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
}};
That used to do the trick for me. You might try it as well.

You can wrap your code inside DOM ready handler $(function() {...}); to make sure your DOM elements are loaded properly before executing your jQuery code.
$(function(
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
)};

My belief is your selector $('input[type=text]') is not selecting , give it some id and use it like
$("#text").click(function(){
$("#file").trigger("click");
});

First fire event and then go to url

I have something like this im my project:
<input onchange="doSomething();" .... />
<a href="url" ... ></a>
If input field is focused and I click 'a' link, the browser goes to URL and the event onchange fires only after that. But I want at first to run function "doSomething()" and only then go to the url. How to solve it better?

remove the inline javascript and use jQuery. Preferably you would add some ID's or classes to those elements to target them.
$('input').on('change', doSomething);
$('a').on('click', function(e) {
e.preventDefault();
doSomething();
document.location.href = this.href;
});
Assuming doSomething() is not asynchronous, as that would be completely different.

You could do something like this with jQuery (Not tested)
..
$('a').click(function(){
dosomething();
$(this).attr('href', 'url');
});

instead of onchange event, use onblur at Input.
<input onblur="doSomething();" type="text" />
Hello
Test the demo from http://jsfiddle.net/Bhaarat/V3wT9
if requirement can be satisfied with javascript only then why to create overhead of jquery ?
Please let me know reason for downvote

Click span inside jQuery button

Part of a bigger solution, I have accordion-type jQuery control that implements headers as jQuery toggle buttons. Each header also has to have a help balloon. In nutshell, the setup is similar to that posted at this jsFiddle .
<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span> </div>
<div id="out"/>
$('#button1').button().click(function(){
$('#out').text('Button clicked');
});
$('#span1').click(function(){
$('#out').text('Span clicked');
});
Is that possible to make it so I can click on the Help span, which is located inside the button div? Or, will button always get the events for all of its content preventing inside elements from getting click events?
Thank you.

Your event first fires on span and then also on button. You can prevent the event to be fired on parent by stopPropagation() method. Also, return false do the same.
Fiddle for demonstration
$('#span1').click(function(e){
$('#out').text('Span clicked');
e.stopPropagation();
});

or:
$('#span1').click(function(){
$('#out').text('Span clicked');
return false;
});
jSfiddle http://jsfiddle.net/kxntf/5/

Categories