Not sure why this wouldn't work, but for some reason, the click event is firing a console.log but then it's not executing the addClass to the HTML element I'm trying to target. Not sure if there is anything that I need to look out for. I've tested this in Chrome on my Mac and it works fine, but then when I test on a Surface running Windows8, no dice.
Here's what I have:
HTML:
<div class="window-element">
<p>thing to test</p>
Close this
</div>
JS:
$(".close-box").on('click', function(e){
$(".window-element").addClass("hidden");
console.log("click test");
e.preventDefault();
});
Not sure if there is anything else that I need to work around with?
To make as a minimum change as possible I would change your JS to:
$(document).on('click','.close-box', function(e){
$('.window-element').addClass('hidden');
console.log("click test");
e.preventDefault();
});
This seemed to work for me. Try out this jsfiddle to see if this is what you're looking for: https://jsfiddle.net/91myczwj/1/
I would suggest you to use vanilla JavaScript for this particular code snippet like so:
HTML:
<div class="window-element">
<p>thing to test</p>
Close this
</div>
JavaScript:
const closeBox = document.querySelector('.close-box');
const windowElement = document.querySelector('.window-element');
closeBox.addEventListener('click', function(e){
windowElement.classList.add("hidden");
console.log("click test");
e.preventDefault();
});
Check this working code sample.
Related
I have a template (a jsp file in Spring MVC framework) with the "fulfill" button (when a user clicks on it, it will redirect to another page).
I have verified that my code works on my local desktop (using both Chrome and Firefox) that when I clicked on the "fulfill" button, it successfully redirected to another page.
But when I tested it in the chrome on an Android phone and clicked on the button, nothing happened.
My JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#fulfillButton').click(function() {
location.href = "/tt/fulfill/order/${orderID}";
});
});
My html:
<button id="fulfillButton" type="button" class="action-button shadow animate green">
FulFill
Am I missing anything here?
If solution given by Adi not work, try to register event after some time as below
$(document).ready(function() {
setTimeout(function(){
$('#fulfillButton').click(function() {
location.href = "/tt/fulfill/order/${orderID}";
});
},200);
});
Try to avoid this way of button click call.
You should try given code or you can call a function, on click event which will also help you out.
<html>
<button onclick="submitQuery()"></button>
</html>
<script>
function submitQuery(){
//Do whatever You wish
}
</script>
<script>
//Another way
$('#fulfillButton').on('click',function(){
//Place code here
});
</script>
Noting though that .on() supports several other parameter combinations that .click() doesn't, allowing it to handle event delegation (superceding .delegate() and .live()).
You can try touch events. it should work on both android and iPhones
ex: replace click with touchstart click
$('#whatever').on('touchstart click', function(){ /* do something... */ });
I have the following jQuery on the page:
$('#nav-icon1,#nav-icon3').click(function(){
});
And corresponding HTML like this:
<div id="nav-icon3" class="">
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
<span class="whitehamburger origin"></span>
</div>
There's no nav-icon1 anywhere on the page, but when I change the jQuery to be this:
$('#nav-icon3').click(function(){
});
It stops working.
What am I missing? Thanks!
it's necessary attach that event to your div? check if your spans are position "relative" because if they are "absolute" your div "nav-icon3" may not be visible with height:0px.
another way to add events is using "bind"
$(function(){
$("#nav-icon3").bind('click', function()
{
// some code...
});
});
or
$(function(){
$("#nav-icon3").bind('click', _onNavClick);
});
function _onNavClick(event)
{
// some code...
}
It seems different error, what you are doing is working just how it is. Check it here jsfiddle.net/ed9xsh62/ Check your console or share URL to check the exact error.
$(function(){
$( "#nav-icon3" ).click(function() {
//code goes here
//can do a simple alert to test the function
});
});
Could be a possibility that you just did not have your code in document.ready function (I used the shorthand version). I tried your code and it worked perfectly as long as it was in the document.ready function.
I wanted to implement a clear button for my textbox. I found a really nice solution in the SO thread here.
I'll paste the js code here:
function tog(v){return v?'addClass':'removeClass';}
$(document).on('input', '.clearable', function(){
$(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
$(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('click', '.onX', function(){
$(this).removeClass('x onX').val('');
});
I implemented this on my site and it works perfectly on the desktop. However, when I tested the same in iPad, it didn't work at all.
I tried to replace the "click" with "tochstart"/"touch" but it doesn't makes any change.
I created a jsfiddle of the code so you can see. Please help me out, How do I resolve this so it works for both desktop and iPad.
You could try to combine "click" and "touchstart", like this: http://jsfiddle.net/veritas87/D2ACE/2/
.on('touchstart click', '.onX', function(){
$(this).removeClass('x onX').val('');
});
You can also try the "tap" event, described here: http://www.w3schools.com/jquerymobile/event_tap.asp
So i want to execute code when i click on a div.
So I have a function
function froth(){$("#area").load("test.html #enquiry1");}
I want to call this function when I click a div
<div id="t1">Test</div>
So I try and use this code
$('#t1').click(function(){
froth();
});
Nope it doesnt work.
BUT
I go to the HTML document and do this
<div id="t1" onclick="froth()">Test</div>
AND IT works perfectly.
So my question is, what am i doing wrong here? Why would it work when in the html doc and not work when i try and make it clickable with jquery?
The main issue is that you need to bind your click event after the rest of the DOM has loaded
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
You can see a live example here
$(document).on('click', '#t1', function() {
froth();
});
I have a page that has a lot of JS created elements. So i wish to focus a textarea after it appear. I try to make it with help of addEventListener like so:
mytextarea.addEventListener('someEvent', function(e)
{
this.focus();
});
My problem is, that i can not found the right Event, that would be fired at the moment, when textarea get appended in the document, like here
document.getElementsByTagName('body')[0].appendChild(mytextarea);
Native JS Only please. Thank you
Have you tried this:
document.getElementsByTagName('body')[0].appendChild(mytextarea);
mytextarea.focus();
FIDDLE
this should work:
<textarea autofocus></textarea>
Put your focus in
$(document).ready(function(){
//Here
});
This mean your textarea is appended to the document.
And without jQuery :
window.addEventListener('load', function () {
//here
});