Develop Reference

checkbox change event not working

i'm Trying to include an onclick event for a checkbox in my laravel application
This is my Input Section
<input type="checkbox" id="early_access" name="early_access">
And the function
$(document).ready(function() {
$('#early_access').change(function() {
alert("booyah");
});
});
The function is not working ..

Guys i found the problem and solved it
Unfortunately the frontend designer had some other function running for changing the style of checkbox and it was inherited from the master layout ...
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
});
this was running instead of my script :( .. when i removed it everything worked

Have you checked if your jquery was loaded?
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
Use on
$(document).ready(function() {
$('#early_access').on("change", function() {
alert("booyah");
});
});
If you can, I suggest that you use your selector #early_access as an argument.
$(document).ready(function() {
$(document).on("change", "#early_access" function() {
alert("booyah");
});
});
It might not be relevant with an id but if you use a class based attribute and you dynamically change the DOM, it will still be responsive. But that might be beyond the point of your question.

Your code is absolutely fine see this fiddle
https://jsfiddle.net/avinash8526/nL1crxn0/1/
$(document).ready(function() {
$('#early_access').change(function() {
alert("I will only work with check uncheck");
});
});
Further you have onchange event applied, hence this alert will only work if you check/uncheck this box

Cannot close div

I'm trying to make this persistant cart that lets you add products to cart without redirecting to a new page. It works perfectly, but the only problem is that it can not be closed when you click on the exit button in the corner. Live version here by clicking on cart. Make sure to add a product to see it work, else you won't see anything.
I have tried this:
<script type="text/javascript">
$(document).ready(function(){
$('.cart-show').click(function(){
$("#cart").hide();
});
});
</script>
Aswell as cartToggle with is a feature in the Shopify theme Timber.

The class .cart-show is adding to your [X] element later, so you should use event delegation:
$(document).ready(function() {
$('body').on('click', '.cart-show', function (e) {
$("#cart").hide();
});
});

Try this:
$(document).ready(function(){
$(document).on('click', '.cart-show', function (event) {
event.preventDefault();
$("#cart").hide();
});

1.) You should use event delegation,
2.) If you have id for element you should use id as selector
$(document).ready(function() {
$('body').on('click', '#exit', function () {
$("#cart").hide();
});
});

Working with dynamic jQuery

I was wondering how to make this trigger work as I've tried all I can, but can't seem to find out the problem.
HTML
<div id="testFunc">Change AHref Class</div>
test
JavaScript
$(function () {
$("#testFunc").click(function () {
$('#testLink').removeClass("button");
$('#testLink').addClass("button2");
return false;
});
});
$(function () {
$(".button2").click(function () {
alert('test');
return false;
});
});
Somehow, the upon triggering testFunc which changes the source dynamically which causes the a href class to change from button to button2, it doesn't seem to register when i use button2 click.
Is there anyway to solve this?
Thanks!

Try .on()
Use Event Delegation.
$(document).on('click','.button2',function(){ code here });
Syntax
$( elements ).on( events, selector, data, handler );
Demo Working Fiddle , Problem Fiddle

How do I use JQuery to hide a div on click again?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#clicker").click(function() {
$(".show_this").show();
e.preventDefault();
});
});
</script>
Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?
I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.

You can use toggle();
$(".show_this").toggle();
This will toggle every time, so if it is hidden it will show it and vice versa
Api Documentation: http://api.jquery.com/toggle
Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.

Use .toggle() instead.
$(document).ready(function() {
$("#clicker").click(function(e) {
$(".show_this").toggle();
e.preventDefault();
});
});
jsFiddle example

You can do this using the .toggle() method like:
$(document).ready(function() {
$("#clicker").click(function(e) { // call the event variable 'e' first here
e.preventDefault();
$(".show_this").toggle();
});
});

triggering onchange event

I'm not able to get the below code to work.
$("#grid_table td:nth-child(10) input").live("onchange",function () {
alert("changed");
});
am I missing something here? Thanks.
Ravi

Try changing onchange to change..
$("#grid_table td:nth-child(10) input").live("change",function () {
alert("changed");
});
If that doesn't work I would verify your selector is working correctly.

Have you tried this:
$("#grid_table td:nth-child(10) input").change(function () {
alert("changed");
});
to make sure your selector is working properly?