In the following code i want to know how to detect when text is inserted dynamically in input field
<input id="test"><br />
Click me
$("#test").on("input", function() {
alert("Change to " + this.value);
});
$("a").on("click", function() {
$("#test").val("In clicks we trust.");
});
line to the code
Listen for a change event, also, you'll have to trigger this after programatically adding text:
$("#test").on("change", function() {
alert("Change to " + this.value);
});
$("a").on("click", function() {
$("#test").val("In clicks we trust.").change();
});
Demo: http://jsfiddle.net/fSUd8/1/
jQuery change() event handler
$('#test').on('change', function() {
...
});
Related
I have an input field which has a focusout event on it. I also have a click event set on $('html') which transfers focus to a different input field. I wrote a click handler for my input field and put in event.stopPropagation(); but it doesn't seem to be working. What am I missing? What does $('html') refer to? My code:
p.replaceWith(
"<input class='memoryEditField' type='text' value=" + p.text() + ">"
);
var inputField = $(".memoryEditField");
inputField
.on("click", function(event) {
event.stopPropagation();
})
.on("focusout", editFieldLostFocus)
.on("keyup", editFieldKeyPressed);
The other input field:
$("html").on("touchstart", function() {
MQInput.focus();
});
$("html").on("click", function() {
MQInput.focus();
});
Please provide all of code (what is p in Your code? Also editFieldLostFocus, editFieldKeyPressed).
I think You're missing something in methods editFieldLostFocus, editFieldKeyPressed and it makes illusion that stopPropogation does no work
In fact it works as expected:
$(function() {
$('p').each(function() {
var p = $(this);
p.replaceWith(
'<input class="memoryEditField" type="text" value="' + p.text() + '">'
);
});
function editFieldLostFocus() {
console.log('call editFieldLostFocus');
}
function editFieldKeyPressed() {
console.log('call editFieldKeyPressed');
}
var inputFields = $(".memoryEditField");
inputFields
.on("click", function(event) {
event.stopPropagation();
console.log('memoryEditField clicked');
})
.on("focusout", editFieldLostFocus)
.on("keyup", editFieldKeyPressed);
$("html").on("touchstart", function() {
console.log('MQInput.focus');
//MQInput.focus();
});
$("html").on("click", function() {
console.log('MQInput.focus');
//MQInput.focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>FIELD 1</p><br/>
<p>FIELD 2</p><br/>
I have a number of links (A elements) STYLED AS buttons with class "btn" and when one of them is clicked, I want that particular button to be disabled. this code doesn't work:
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
There are a gazillion tutorials for preventing the default event of a form submit button, and then disabling that, but that is not quite what I need...
Apparently, my $this isn't pointing to the correct object, or something =)
----------- UPDATE ---------------
SORRY, update above. The element I have is not a button, it is a link styled as a button...
Don't try to disable the Anchor tag. Try to set the href instead.
$('.btn').on('click', function(e) {
e.preventDefault();
$(this).off("click").attr('href', "javascript: void(0);");
//add .off() if you don't want to trigger any event associated with this link
});
You only need to stop defaultevent from links.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
e.preventDefault();
});
This works for me:
$('a').css("pointer-events", "none");
In my case I used the following:
onclick="$(this).css('pointer-events', 'none');"
It works fine.
$('.btn').on('click', function(e) {
$(this).prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class='btn'>But1</button>
<button class='btn'>But2</button>
</div>
Instead of using this, you can just specify your target by using its id.
$('.btn').on('click', function(e) {
$('#btn2').prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1" class="btn">Button</button>
<button id="btn2" class="btn">Button</button>
<button id="btn3" class="btn">Button</button>
Hope it helps
$('.btn').on('click', function(e) {
$(this).attr('disabled', true);
});
Check this post: https://stackoverflow.com/a/5876747/5243272
This works (in chrome), but perhaps some drawbacks?
$('.btn').on('click', function(e) {
if( $(this).prop('disabled') == true) {
return false;
}
$(this).prop('disabled',true);
});
$(document).ready(function() {
$('.btn').on('click', function(e) {
e.stopPropagation();
e.preventDefault();
alert('I have been clicked!');
$(this).css('pointer-events', 'none').css('cursor', 'default');
});
});
This will prevent any other further clicks on that link.
If your Html like this
This is another paragraph.
use below code :
$(".test").one("click", function() {
var clas = $(this).attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
If your Html like this
<button class="btn">This is another paragraph.</button>
use below code :
$(".btn").one("click", function() {
var clas = $(this).parent().attr("class");
setTimeout(function() {
$("." + clas).removeAttr('href');
}, 100);
});
I have a table with some div's inside it.
I want an event to happen when I click on a td element, but I also want an event to happen when I click on a div element.
As you can see in this fiddle http://jsfiddle.net/rkGkp/1/ my problem is, when I click on the div element, both the div and td event is triggered, but I only want the div's event to be triggered.
I use these event listeners
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function() {
alert("a td is clicked");
});
});
What can I do to avoid the element behind my div to trigger an event?
Have a look here: FIDDLE
I used stopPropagation()
CODE
$("#div").on("click", function(event) {
event.stopPropagation();
alert("a div is clicked");
});
This is the easiest way to achieve what you need. Simply check if the click target is on the div:
$(function() {
$("#div").on("click", function() {
alert("a div is clicked");
});
});
$(function() {
$(".td").on("click", function(e) {
if(!$(e.target).is("#div")){
alert("a td is clicked");
}
});
});
How to trigger an action when focusing an input but the focus event not come from click?
$('#input').focus(function(){
if(not come from click)
{
alert('Holla!');
}
});
To tell between "focus" events that come from keyboard and those that come from mouse, you can track the mouse events.
First, to understand the sequence of events that happen when you click an input, or Tab into it, look at the following jsfiddle: http://jsfiddle.net/orlenko/fyFkk/
In it, we'll log mousedown, mouseup, click, focus, and blur events.\
<input type="text" id="zero"/>
<input type="text" id="one"/>
JavaScript:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
console.log('focus');
});
one.blur(function() {
console.log('blur');
});
});
If we simply click on the input, and then on another control, we'll get the following:
mousedown
focus
mouseup
click
blur
But if we tab into and out of the input, we'll see in the console:
focus
blur
So, if we keep track of mousedown and blur events, we can tell between a keyboard-based focus and a mouse-based one. For example:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
$(this).data('mousedown', true);
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
if ($(this).data('mousedown')) {
console.log('You clicked it!');
} else {
console.log('You tabbed it!');
}
});
one.blur(function() {
console.log('blur');
$(this).data('mousedown', false);
});
});
A fiddle with this example: http://jsfiddle.net/orlenko/cwRAw/
Use keyup
$('#input').keyup(function(){
alert('Called only when the focus is on element through keypress');
});
function ren(){
alert('Holla!');
}
$('input').focus(ren);
$('input').mousedown(function(){
$('input').off('focus',ren);
});
$('input').mouseup(function(){
$('input').on('focus',ren);
});
Don't check in focus function instead remove the focus function when making a click
Demonstration
So I have two click events for "button-open" and "button-close". I have one button that switches from "button-open" to "button-close" on click. So when i click it again, it should fire the event for "button-close" but instead it fires the event for "button-open" again.
Demo : jsFidde
Here's my code:
Button​
<script>
$(document).ready(function() {
$(".button-open").click(function() {
$(this).removeClass("button-open").addClass("button-close");
alert("Open Was Clicked");
});
$(".button-close").click(function() {
$(this).removeClass("button-close").addClass("button-open");
alert("Close Was Clicked");
});
});
</script>
Use on() instead of click(), since you need to bind to an element that doesn't yet exist when you initially bind it.
$(document).on('click', '.button-open', function() {
$(this).removeClass("button-open").addClass("button-close");
alert("Open Was Clicked");
});
$(document).on('click', '.button-close', function() {
$(this).removeClass("button-close").addClass("button-open");
alert("Close Was Clicked");
});
DEMO.