This question already has answers here:
In jQuery, how can I tell between a programmatic and user click?
(7 answers)
Closed 8 years ago.
In javascript/jquery, I have a button that have a click event defined like:
$("#target").click(function() {
var mouse_click = ________________;
// do stuff
if (mouse_click) {
// do stuff
}
// do stuff
});
and I also have code to do
$('#target').click();
How can I get the variable mouse_click to be true, if the user manually clicked the tag using the mouse, and the variable to be false when I click the tag using the .click() function?
Thanks
You could use this:
$("#target").click(function(e) {
var mouse_click = !(e.originalEvent === undefined);
// do stuff
if (mouse_click) {
// do stuff
}
// do stuff
});
or you could check e.isTrigger which is set whenever an event is triggered within jQuery. You'd just need to change the second line to:
var mouse_click = !e.isTrigger;
Both will work but you might prefer the second option as it's a little more concise.
Here it is working: http://jsfiddle.net/2U3Us/4/
Related
This question already has answers here:
addeventlistener not working, event not waiting for on click
(2 answers)
Closed 2 years ago.
function hide(c1) {
document.getElementById(c1).style.display = "none";
}
document.getElementById("red-circle").onclick = hide("red-circle");
When the page loads, the red circle is automatically hidden. I am trying to understand how to define the "hide" function to call it later while passing the name of the item to be hidden.
It's because in the code you posted, you are trying to set the onclick event to the return value of the hide function, instead of the hide function itself. Try this:
function hide(c1) {
document.getElementById(c1).style.display = "none";
}
document.getElementById("red-circle").onclick = function(){
hide("red-circle");
};
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I try to run the following code in Javascript :
function test(){
if(document.querySelector('.js-pricing')){
var checkbox = document.querySelector(".js-pricing");
alert('is working');
checkbox.addEventListener('change', function(){
if(this.checked) {
console.log('is-checked')
} else {
console.log('is not')
}
})
}
}
test();
to know when my checkbox is checked or not, the EventListener is not working I have none console.log in my console but my alert() is working well, I guess the element is well detected when the page is loaded but can't handle the event listener.
Also tried with document.ready to start the event but it does not work
I have the same result when I try with a getElementById.
Here is my html (in jade) line for the input :
input(type="checkbox", name="pricing", id="pricing", checked).switch__input.js-pricing
Do you know how to run the EventListener properly?
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have a PHP snippet in a separate file which I am loading in a javascript file using jquery:
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php");
This works because I am able to show this on screen. However, this snippet contains a button which I would like to click in the same javascript file where I loaded the snippet. something simple like:
$(".signupbtn").on("click", function(){
console.log("signed Up");
});
This click is, however, not working. signupbtn is a div element in the snippet. Somehow I am missing an extra step since jquery seems to not be recognizing the elements in the snippet.
Lazy loaded elements are not recognized from eventhandlers which are already initialized. So you have to set the event on a parent. This should work:
$(document).on('click', '.signupbtn', function(){
console.log("signed Up");
});
https://api.jquery.com/load/
You could use the complete function to check if it has loaded, or you could just put the button function inside there.
let signUpMode = $(".modal");
signUpMode.load("login_signup_popup.php", function() {
$(".signupbtn").on("click", function() {
console.log("signed Up");
});
});
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
What I am trying to do is to set the same function to different elements with similar id, for example "icon-1","icon-2","icon-3". The function opens up a window that corresponds to those ids -- "window-1", "window-2","window-3". I was trying to use this code block:
for (var i=1; i<=3; i++) {
$("#icon"+i.toString()).click(function(){
$("#window"+i.toString()).show();
)};
)};
Ideally, when "icon-1" is clicked, it opens "window-1", etc. But it's not working.
And I checked console.log(i), every time when a click event occurs, it prints out the final count of i, which is 4.
Is there any way to fix or walk around this?
Thanks a lot!
When you say 'opens up a window', do you mean to open up a popup window or just showing an existing element?
Assuming it's the latter, I would give each of your icons a class that they all share and attach the click handler to elements with that class rather than using three different click handlers. Then use the data attribute to store the corresponding window number:
<div class="icon" data-window="1">This is an icon</div>
<div class="icon" data-window="2">This is an icon</div>
$('.icon').click(function(){
var windowNum = $(this).data();
$('#window-' + windowNum).show();
});
Try classes to achieve that.
$('.yourIconClass').each(function() {
$(this).click(function(){
$('.yourWindowClass').eq($(this).index).show();
});
});
I wouldn't use a for loop for this. I don't use query, so I'll speak in javascript.
I would assign the buttons/icons to variables in javascript and then just have an event listener for each of the buttons. That event listener will send a value to a function that will determine which window to open:
var button1 = document.getElementById("button_1_id");
var button2 = document.getElementById("button_2_id");
var button2 = document.getElementById("button_2_id");
button1.addEventListener('click',function(){
triggerWindow(1);
});
button2.addEventListener('click',function(){
triggerWindow(2);
});
button3.addEventListener('click',function(){
triggerWindow(3);
});
function triggerWindow(input) {
if(input === 1){
/* code to trigger window one */
}
else if(input === 2){
/* code to trigger window two */
}
else if(input === 3){
/* code to trigger window three */
}
}
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 9 years ago.
I have some simple code for one of my first jquery scripts, I'm trying to call it's function but it keeps saying the function doesn't exist! I have check the spelling and I'm sure I had this working before but I have no idea what's changed.
This is my code: http://jsfiddle.net/spadez/6LLpC/
This is how I'm calling my function:
jQuery(function($){
applyField();
});
Can anyone show me where I went wrong please?
applyField isn't defined because jsFiddle wraps your code in an onload event handler. So the function is only visible in this event handler.
Choose "no wrap - in <head>" in the left menu :
Alternatively, you could also call your function from this event handler, this would be more coherent.
Note that calling the function isn't enough. If you want your event binding to be effective, change
$(this).on('change', '#apply',function() {
to
$(document.body).on('change', '#apply',function() {
Demonstration
After fixing the onload issue, your second problem is this is not a parent of the <select> element, in your function. In order to use that style of .on you need to pass in a parent of the element you're targeting (which can be document).
Change from:
$(this).on('change', '#apply',function() {
To:
$(document).on('change', '#apply',function() {
Also, to prevent hiding all inputs, I suggest using a class instead of selecting $('input'). See fiddle.
Updated fiddle
Approach - 1 => Click here for Demo
JQuery
$(document).ready(function(){
applyField();
});
// Apply Fields
function applyField() {
$(this).on('change', '#apply',function() {
var selected = $(this).find(':selected').val(),
elem = $("#"+selected);
$("input").addClass('hidden');
elem.removeClass('hidden');
$(".donthide").show();
});
$("#apply").trigger('change');
};
Approach - 2=> Click here for Demo
JQuery
on needed to execute the function after the DOM is ready.. Check demo.
$(document).ready(function () {
$(this).on('change', '#apply',function() {
var selected = $(this).find(':selected').val(),
elem = $("#"+selected);
$("input").addClass('hidden');
elem.removeClass('hidden');
$(".donthide").show();
});
$("#apply").trigger('change');
});