HTML:
<div class="infoBox2 blackBoxHover">
<h2>direct Link: </h2>
<input class="fileInput" type="text" id="directlinkText" name="directlinkText" />
</div>
JAVASCRIPT:
$('#directlinkText').parent('div').click(function () {
alert('test');
});
The thing is I want to see test when I click anywhere on the div EXCEPT for if I click on the input that's within it.
Right now clicking the textbox input also fires the div's click event
how do I fix this?
$('#directlinkText').parent('div').click(function (e) {
if(e.target.id === "directlinkText"){
return;
}
alert('test');
});
This is because your input is inside div. Attach event to your text box and then stop event propagation.
$('#directlinkText').click(function(event) {
event.stopPropagation();
});
This will stop event propagation.
You can stop the propagation of the click event when it originates from the input elements like this:
$('#directlinkText').click(false).parent('div').click(function () {
alert('test');
});
This returns false for the click event directly on the #directlinkText element. Which in a jQuery event handler is the same as calling: event.preventDefault() and event.stopPropagation(). If you just wanted to stop the propagation and not prevent the default behavior then you could use:
$('#directlinkText').click(function (event) {
event.stopPropagation();
}).parent('div').click(function () {
alert('test');
});
Related
I have the following submit:
<input type="submit" id="buttonNext" name="buttoncrd" value="Prosegui" class="buttonNavProsegui block-ui"/>
When you are on the page, i want to active the submit with the keyboard button "Entry" so i made this simple js code:
$(document).ready(function() {
$(document).keypress(function(event){
if (event.which == 13){
$("#buttonNext").click();
}
});
});
It works correctly but i met some problem when i have the focus on the submit AND i press Enter on the keyboard. I fear that the submit fires twice, can you help me disable one submit when is focused?
You can use
$(document).ready(function() {
$(document).keypress(function(event){
if (event.which == 13){
$("#buttonNext").click();
event.preventDefault();
}
});
});
It will not trigger twice.
$("#buttonNext").addEventListener('keypress', e => {
e.stopPropagation()
})
might do the trick. It prevents the event from propagating up in the hierarchy when a keypress event happens on the button.
I am using this below code for button click event using jQuery. When button is clicked the page reloads.
$('#button1').click(function () {
//Code goes here
return false;
});
If your "button" is a button element, make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
<button id="button1" type="button">Go</button>
If it's an input element, do so with jQuery with the following:
$('#button1').click(function(e){
e.preventDefault();
// Code goes here
});
Read more: event.preventDefault()
You can use event.preventDefault() to prevent the default event (click) from occurring.
$('#button1').click(function(e) {
// prevent click action
e.preventDefault();
// your code here
return false;
});
Sorry for my English, I'm not native English speaker.
I have problem with my code. I have on page something like this:
$('#hook label').on('click', function() {
console.log('ok');
icon = $(this).next('input').val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hook">
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
<label><input> <img src="http://placehold.it/35x35" ></label>
</div>
And this code is running twice if I click on image, but only one when I click on input or label element. How can I prevent to running this twice?
Here is example: http://jsfiddle.net/00akgoe7/2/
It's because of the default behavior of label. To stop that, you need to tell to the event object to stop is default behavior like this:
$('#hook label').on('click', function(ev) {
ev.preventDefault();
console.log('ok');
icon = $(this).next('input').val();
});
Clicking on a label associeted with the for attribute or inside the label, focus the input with a "fake" click event. This is why you get the event twice since by extension, if you click the input, you click the label (the parent) also.
It's two times because when you click on the label it send a click event also to the input and the new event bubbles back to the label. It's tricky :)
It's in all browsers for a better form usability.
So the another possible solution is:
$('label').click(function(e) {
if (e.target.tagName === "LABEL") {
alert("!! here")
}
});
Try it live: http://jsfiddle.net/8qffhwm3/2/
You just need to add a preventDefault().
$('#hook label').on('click', function(e) {
e.preventDefault();
console.log('ok');
});
I expect that it help you.
If you want prevent from the event being fired twice, you can use the 'mousedown' event handler. It will just be triggered once, as it is not triggered by standard by clicking the label.
I disable a jQuery click event with:
$("#button").click( function () { return false;}
How can I enable it? The intention is avoid double clicks and run multiple times the function that triggers.
I want to restore the event when other button was pushed.
There's a couple options, but I like the following best:
//disable
$("#button").bind('click', function() { return false; });
//enable
$("#button").unbind('click');
You could also bind click again on the button to some other callback function as well. Lastly, I might suggest calling preventDefault on the event from a click event, depending on what #button really is like so:
$("#button").bind('click', function(e) {
e.preventDefault();
return false;
});
As j08691 pointed out, as of jQuery 1.7 on, it should look like:
$("#button").on('click', function(e) {
e.preventDefault();
return false;
});
You could also use one:
$("#button").one('click', function () { /* code here */ });
The event will unbind itself after being called once.
If you do:
$("#button").unbind("click");
the button will be working again, the unbind function erases registered events handlers from the selected element, if you dont pass it an argument it will erase all events registered.
EDIT: as noted in the comments, you can use now the on and off methods:
$("#button").off("click")
to disable clicks and:
$("#button").on("click")
to enable them again
Anyone know how to prevent an HTML checkbox from getting focus when clicked? I still want it to change state, just not get focus.
You can prevent the focus by using preventDefault() in a mousedown handler:
$('input[type=checkbox]').mousedown(function (event) {
// Toggle checkstate logic
event.preventDefault(); // this would stop mousedown from continuing and would not focus
});
In pure JavaScript:
checkbox.onmousedown = function (event) {
// Toggle checkstate logic
event.preventDefault(); // this would stop mousedown from continuing and would not focus
}
Give this CSS:
input {outline: 0;}
But be aware that when you move control using Tab key, it won't be possible to identify which control are you in currently.
Update #1
Use this JavaScript:
$('input[type=checkbox]').click(function () {
this.blur();
});