Chrome not registering click - google-chrome

This page: http://rippertshirts.co.uk/products/bazinga-t-shirt-brand-new-funny-geeky-big-bang-theory-ripper-s-m-l-xl/
I cannot add an item to the cart in Google Chrome.
Here is the input:
<input type="submit" value="Add to Cart" class="Cart66ButtonPrimary purAddToCart" name="addToCart_68" id="addToCart_68" disabled="disabled">
Can anyone think of a reason for this? Could it be the disabled="disabled feature"
I tried adding this to my header.php but no luck :(
<script type="text/javascript">
jQuery(document).ready(function(){
$(function() {
$(".Cart66ButtonPrimary").click(function(){
$("input").removeAttr("disabled");
return(true);
});
});
</script>

Try to wrap your code inside DOM ready handler since you'are putting your jQuery code in the <head> section of your page:
$(function() {
$(".Cart66ButtonPrimary").click(function(){
$("input:text").removeAttr("disabled");
return(true);
});
});

Related

jQuery .click() event not being captured

I was trying to make a play-pause button using jQuery but the mouse click event is not being captured. I am trying to remove and add font-awesome class on each click such that it can change its icon.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mycarousel").carousel({interval: 2000});
console.log("document is ready");
$("#mycarousel").on("click", "#carouselButton", function(e) {
e.preventDefault(); //added after reading from one of the answers on stackoverflow
console.log("this is a click!");
if ($("#carouselButton").children("span").hasClass("fa-pause")) {
$("#mycarousel").carousel("pause");
$("#carouselButton").children("span").removeClass("fa-pause");
$("#carouselButton").children("span").addClass("fa-play");
}
else if($("#carouselButton").children("span").hasClass("fa-play")) {
$("#mycarousel").carousel("cycle");
$("#carouselButton").children("span").removeClass("fa-play");
$("#carouselButton").children("span").addClass("fa-pause");
}
// return false;
});
});
</script>
</head>
<body>
<div id="mycarousel">
.......
<button type="button" id="carouselButton" class="btn btn-danger btn-sm" >
<span class="fa fa-pause"></span>
</button>
</div>
</body>
At the console I am only getting "document is ready" as output.
I also tried using $("#carouselButton").click(function() {...}); instead of $("#mycarousel").on("click", "#carouselButton", function() {...}); but the button didn't budged at all.
I tested it on edge and chrome after disabling caching on browser.
Any body has any suggestions how can I make this work or where am I going wrong?

jQuery click not getting picked up

I have a input in a td and the click script is not getting picked up and im not sure why? There are no errors in the console.
<td>
<input type="button" class="edit btn btn-primary" value="Edit"></input>
</td>
Script below:
<script>
$('.edit').click(function () {
console.log("Test")
})
</script>
The 'click' even listener might run before the .edit element is rendered to the page. maybe wrap it in a document ready function to ensure it doesn't run till the page is loaded. like this:
$( document ).ready(function() {
$('.edit').click(function () {
console.log("Test")
})
});
Please add jquery.js file first like this.
<script src="https://code.jquery.com/jquery-3.6.0.js"> </script>
<script type="text/javascript">
$('.edit').click(function () {
console.log("Test")
})
</script>

Novice HTML - Buttons don't work correctly

I'm trying to create my very first HTML code. My code is:
<html>
<head>
</head>
<body>
<input type="button" id="apply" value="Push Me" onclick="javascript:faa();" />
<input type="button" id="apply" value="No, Push Me Instead" onclick="javascript:foo();" />
Official website of Foocorp Inc. (Not really.)
</body>
<script type="text/javascipt">
function faa(e)
{
alert('Nope, it is the other button.');
}
</script>
<script type="text/javascript">
function foo(e)
{
alert('You have destroyed your computer. Thank you for your time.');
window.close();
}
</script>
</html>
Whenever I push the button with value "No, Push Me Instead" it works fine. The button "Push Me" doesn't do anything when I push it. What am I doing wrong?
text/javascipt should have an r in it.
HTML 5 makes the type attribute for script elements optional when you are writing JavaScript. When you are dealing with JS, the attribute serves no purpose other then to be an opportunity to make types that break your code so omit it entirely.
Works fine when I move the other function to the same script:
<script type="text/javascript">
function foo(e)
{
alert('You have destroyed your computer. Thank you for your time.');
window.close();
}
function faa(e)
{
alert('Nope, it is the other button.');
}
</script>
You have to change script type spelling, as there is a spelling mistake
<script type="text/javascript">

Popover on input field

I've tried looking at previous solutions but none of them have worked.
I'm trying to have a popover show up to the left after clicking on the input field.
HTML:
<input id="name" type="text" placeholder="Type your full name" rel="popover">
JS:
<script type="text/javascript">
$('#name').popover({'title': 'Name tooltip'});
</script>
If you use placement:left when you init the popover it should work. Is your popover not working at all, or just not on the left?
And, don't forget the document.ready..
$(document).ready(function() {
$('#name').popover({title:'Name tooltip',placement:'left'});
});
Demo: http://bootply.com/61386
qTip is nice! Version 2 is out: http://craigsworks.com/projects/qtip2/
try this
<script type="text/javascript">
$("#name").popover({title: "Name tooltip"});
</script>
Dumb mistake by me. I wasn't loading the JavaScript files from the right directory.

Mootools - why not run?

you can test my code , when i click buton , we will get 2 link
click on first link , not alert
click on second link , show alert
why first link not alert, how to it can alert ?
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("mootools", "1.1.2");</script>
<script>
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('content').innerHTML = $('test').innerHTML;
});
});
</script>
</head>
<body>
<input id="button" type="button" name="button" value="Click"/>
<div id="content">
</div>
<div id="test">
<script>
function test(){
$('a-content').addEvent('click', function(){
alert(1);
});
}
window.addEvent('domready', function(){
test();
});
</script>
<a id="a-content" href="#">CLICK HERE</a>
</div>
</body>
</html>
When injecting HTML on the fly events aren't carried over unless you use event delegation. If you don't use event delegation the event will only be on the original element. See http://mootools.net/docs/more/Element/Element.Delegation
You'll need to do something like this. $('body').addEvent('click:relay(#a-content)', function(){...}); Where the body would capture the click event and delegate it to any element with the id of "a-content".
Also by setting the content like this $('content').innerHTML = $('test').innerHTML; you will have duplicate elements with the id "a-content" this is wrong. HTML id's should be unique. Try classing stuff that you'll reuse instead.