checkbox change event not working - javascript

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

Related

On load of a dynamic control in Jquery

I want to change the attr/css of a dynamically added control according to the value of another dynamic control.
For eg.
HTML
<input type="button" id="btnAdd" value="Add Div"/><br/><br/>
Script
$(document).ready(function() {
$('#btnAdd').on('click', function(){
$('<div>Red</div><br/>').appendTo('body');
});
});
At document.ready, the dynamic controls are not loaded. I have to perform my code after the dynamic controls are loaded to DOM.
I was trying the below code but didn't work
$('div').on('load', function() {
$('div').css('color', 'red')
});
Please treat the above code as an example only. From the above eg, I am expecting to do my code in the load event of my dynamic control and not on the click event of the button. (Jquery version 1.7)
Eg 2.
See Here, The "Fired On Load." is not logged.
EDIT :
This is what exactly I am trying to do but not working.
$(document).ready(function () {
$(document).on('load', '#TimeRangeCondition #StartTime', function () {
$(this).attr("placeholder", "00:00").blur();
});
});
Try this way:
$(document).on('load', 'div', function() {
$(this).css('color', 'red')
});

How to trigger Bootstrap fileinput change event?

I am using fileinput control managed by this js in my project. I want to validate if fileinput has file or not. For that, I am trying to trigger change event of fileinput control. But change event is not being triggered. This is my fiddle. Below is my change event to catch changes done to Fileinput.
$(document).ready(function() {
$(document).on('change', '#testImageInput', function () {
alert($(this).val());
});
});
Thank you for suggestions and answers.
here is the updated fiddle link check it
https://jsfiddle.net/b7059pk1/2/
$('#testImageInput').change(function () {
alert($(this).val())
});
It depends on the jQuery version, try this:
<script type="text/javascript">
$(function() {
$("#testImageInput").change(function (){
alert($(this).val());
});
});
</script>
It is always better to target element directly instead of whole document.
Updated fiddle --
https://jsfiddle.net/b7059pk1/1/
$(document).ready(function() {
$("#testImageInput").on('change', function () {
alert($(this).val());
});
});
P.S : I have used jquery 3.2.1 in the updated fiddle

remove() is working on only first div not on rest dynamically added fields

I am trying to remove the HTML field but remove is not working on dynamically added fields.
$('.delete-ques').on('click', function() {
alert('hello');
$(this).parent().remove();
return false;
});
https://jsfiddle.net/gp2gwana/3/
Try to add div and remove
You need event delegation for attaching events to dynamically added elements:
$('#clone-ques').on('click','.delete-ques', function() {
alert('hello');
$(this).parent().remove();
return false;
});
Working Demo
do this
$('body').on('click', '.delete-ques', function() {
// do something
});
You will find some good example
here and here
Use document.on click event for delete on dynamically added elements:
.on used for single handler for all elements that match your selector, including the ones created dynamically.
Demo : https://jsfiddle.net/7s05cdoy/
$(document).on('click','.delete-ques',function() {
$(this).closest('.parent-question').remove(); // using closest you can get parent of this link
return false;
});
You may used $(doument)
$(document).on('click','.delete-ques', function() {
alert('hello');
$(this).parent().remove();
return false;
});
Your working code https://jsfiddle.net/gp2gwana/5/
Everything is perfect in your code. except below line
$('#select-question'+i).selectize({create: true});
Try your existing code by commenting above line of code.
I seen an error in console
Uncaught TypeError: $(...).selectize is not a function
Edit
You should below line of code before return false inside
$('.delete-ques').on('click', function() {
$(this).parent().remove();
return false;
});
Try updated jsfiddle

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

Select all elements except ... in jQuery

I am working on a project, what includes a smartsearch engine.
I'd like to write a method what makes the client write inside the smartsearch, even when it's not focused. F.e. browsing the site, the client hits down a key, and the focus jumps to the smartsearch.
That's working fine with this simple code:
$(document).ready(function()
{
$("*").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But, yeah as You can see, it unfocuses other inputs too, and that's not the way I want it.
I have tried several 'possible-solutions', like :not() and even .not() method like:
$(document).ready(function()
{
$("*").not("input").keydown( function()
{
$("input.ss-24#b").focus();
});
});
But it still unfocuses fields with "input" tagname too. What should I do to force jQuery not to select input fields for this event listener?
Thanks, Steven.
$(document).keydown(function() {
if (!$('input').filter(':focus').length) {
$('#b').focus();
}
});
Working fiddle
$(document).ready(function () {
$(document).keydown(function (e) {
$("input.ss-24#b").focus();
});
});
Does this work?
http://jsfiddle.net/Xbbu8/

Categories

Resources