I'm writing a Javascript script tightly bounded to events. I must execute some instructions on 'focus' event, and some different instructions on 'select' event.
With my surprise I see that giving focus programmatically, fires 'select' event too! That's a big problem.
Can you tell me why this is happening, and if I can block select event programmatically only when I give focus programmatically?
See the following example. When clicking to 'Give focus' button, console will write 'You selected something'!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<input id="field" type="text" />
Give focus
<script>
$(document).ready(function () {
$('#field').on('select', function(e) {
console.log('You selected something');
});
$('#btn').on('click', function(e) {
$('#field').focus();
})
});
</script>
</body>
</html>
Try this:
$(document).ready(function () {
$('#field').on('select', function(e) {
console.log('You selected something');
});
$('#btn').click( function(e) {
$('#field').focus();
})
});
<input id="field" type="text" />
Give focus
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Related
This is not a duplicate of How to trigger jQuery change event in code, since that deals with the interaction of jQuery with jQuery event listeners, while this question discusses the interaction of jQuery with native event listeners.
I use addEventListener to bind a change event for an input, but $('#input').val('bbbb').change(); can't trigger the alert, how to trigger addEventListener("change",function) function by JQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code</title>
</head>
<body>
<script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>
<input id="input" type="text" value="input" />
<script type="text/javascript">
document.getElementById("input").addEventListener("change", function() {
alert(this.value);
});
</script>
<input type="button" value="change input" onclick=" $('#input').val('bbbb').change();" />
</body>
</html>
You cannot trigger a native event with jQuery's .trigger('change'). You will need to create a native event and dispatch it:
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, true);
// ^ ^ ^
// | | cancelable
// | bubbles
// type
And then to fire it:
var el = document.getElementById("input");
el.dispatchEvent(evt);
Bind the change event using jquery.
$("#input").change(function() {
alert(this.value);
});
Working snippet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>code</title>
</head>
<body>
<script src="http://o6flfbzth.bkt.clouddn.com/jquery-1.12.0.min.js"></script>
<input id="input" type="text" value="input" />
<script type="text/javascript">
$( "#input" ).change(function() {
alert(this.value);
});
</script>
<input type="button" value="change input" onclick=" $('#input').val('bbbb').change();" />
</body>
</html>
I'm trying to use sth like onchange but with no results.
i've been searching for a while but i didn't find.
HTML
<input type="text" id="myInput" />
<div id="button"></div>
JS
<script>
$("#button").on('click', function()
{
$("#myInput").val("new value");
});
$("#myInput").on('change keyup paste blur oncut propertychange', function()
{
//my code
});
</script>
I can't find a event where a JQ action is recognized like a changing in my input...
Thank you for your help!
Did you put these js code part into the $(document).ready(function(){
});
I think because these js is not loaded when the webpage is completed loaded.
$(document).ready(function(){
$("#button").on('click', function()
{
$("#myInput").val("new value");
});
$("#myInput").on('change keyup paste blur oncut propertychange', function()
{
console.log('event detected');
});
});
<html>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type="text" id="myInput" />
<div id="button"></div>
</body>
</html>
I'm having trouble getting the following to work:
$('#elem').trigger('click');
When I run it, it doesn't trigger a click but it doesn't show any error logs in the console either.
I've also tried the following with no luck:
$('#elem')[0].click();
Any ideas as to what could be going wrong or a solution for this?
Update: Jquery is working and when I inspect the element, #elem does appear (it's an id for a button)
HTML:
<a:button id="elem">My Button</Button>
JQuery:
P.when('A', 'jQuery').execute(function (A, $) {
//when this function is called, it should trigger a button click
triggerButtonClick = function() {
$('#elem').trigger('click');
};
});
Try it in document.ready function, then all dom loads when the document is ready.You can do something like this based on your requirement.
$( document ).ready(function() {
$('#radio').click(function(){
$('#elem')[0].click();
})
});
i have tried this code and it works
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("chk1").click(function(){
$('#usr').trigger('click');
});
});
</script>
</head>
<body>
<form action="sample.php">
<button id="chk1">click</button>
<input class="form-control" type="submit" id="usr">
</form>
</body>
</html>
this code works for me:
$(window).load(function() {
$('#menu_toggle').trigger('click');
});
$(document).ready(function () {
$('#elem').click(function () {
alert('clicked');
$(this).css('color', 'red');
});
$('#elem').trigger('click');
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="elem" >test</div>
</body>
</html>
How I can call "click" event on input type="file" by calling "context" event on other element?
I am trying this code:
HTML Markup:
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<input type="file" id="file"/>
<button id="trigger">Click</button>
</body>
JavaScript file:
window.onload = function() {
window.oncontextmenu = function(){
return false;
};
$("#trigger").on("contextmenu", function(){
$("#file").trigger("click");
});
}
But I haven't got window to choose file, when I click the right mouse button on button with id="trigger".
Resolved!
window.onload = function() {
$("#trigger").mousedown(function(e){
if(e.button == 2){
$("#file").trigger("click");
}
});
}
try like this:
Script:
$('#trigger').click(function() {
$('#file').trigger('click');
});
I tried to use jQuery serialize to confirm user for form content change. It seems working. The issue is that before I submit the form, I reset the window.onbeforeload to null and hope it will not popup the confirmation dialog when user clicks submit button. But my code below still show the popup when submit button clicked.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery warn page leaving</title>
<link rel="stylesheet" href="../jquery-ui-1.10.4.custom/css/smoothness/jquery-ui-1.10.4.custom.css">
<script src="../jquery-ui-1.10.4.custom/js/jquery-1.10.2.js"></script>
<script src="../jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function(){
$('#form').data('serialize',$('#form').serialize());
}
);
$(window).bind('beforeunload', function(e){
if($('#form').serialize()!=$('#form').data('serialize'))
return "Data changed.";
else e=null;
// i.e; if form state change show box not.
});
$("#form").submit( function() {
alert("called submit");
window.onbeforeunload = null;
});
function disableBeforeUnload() {
alert ("call disable func");
window.onbeforeunload = null;
}
</script>
</head>
<body>
Go to google
<form id="form" name='experiment' action="#" onsubmit="disableBeforeUnload();">
<Label for='firstName'>First name: </label><input name = 'fname' type="text" size="30" />
<Label for='firstName'>Last name: </label><input name = 'lname' type="text" size="30" />
<select name ='options'>
<option value=1> One</option>
<option value=2> two</option>
<option value=3> three</option>
</select>
<button type="submit" name="submit" />
</form>
</body>
</html>
Maybe it'll be better to use unbind function? Like following:
$("#form").submit( function() {
alert("called submit");
window.unbind('beforeunload')
});
You need to unbind the jQuery handler, not the native onbeforeunload event. So use:
$(window).unbind('beforeunload');
Or now, preferred method is to use off() to unbind:
$(window).off('beforeunload');
And on() for binding instead of bind(). Be aware though that bind() and unbind() aren't deprecated, it's still ok to use it.
jsFiddle