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');
});
Related
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:
How to ignore multiple classes using the :not selector?
(2 answers)
Closed 5 years ago.
I have a click function in my card game that I would like to include not() in to exclude certain classes but I can't seem to get it to work.
Basically, I would like to make it so that as long as the class does not equal "match" or "open", to proceed with the click event. If they match then do not run the function.
Here is snippet of the updated basic code I am working with now:
function addCardListener() {
$( '.card:not(.match, .open, .show)').on('click', function(){
alert("TEST");
$(this).addClass('open show');
});
}
I tried replacing:
$('.card').on('click', function() {
with:
$( '.card:not(".match, .open")').bind('click', function(){
but it doesn't work. I can proceed with clicking anything in my deck whether or not those classes are defined on the card. What am I doing wrong? Thanks in advance for any help!
Update:
I stripped out all my code and still can't get it to work. Not sure if you will see this update but my board creation is done like this:
function createBoard() {
shuffle(symbols);
match = 0;
moves = 0;
for (var i = 0; i < symbols.length; i++) {
deck.append($('<li class="card"><i class="fa fa-' +
symbols[i] + '"></i></li>'));
}
addCardListener();
};
The click function goes off whether or not the card's class has open match or show on it. I guess I"m confused, I thought with not() the function would not run if the card had those classes. I updated the stripped down version of the function above. Any advice would be greatly appreciated!
Try this - delegate if the cards are inserted dynamically:
$('body').on('click', '.card:not(.match,.open)', function(e) {
console.log(e);
});
Change 'body' to a closer container if possible to speed up the delegation
i have this HTML code on a page when my page loaded:
<div class="divmain">Add
<span class="spn">123</span>
</div>
when you click on that span it will create another span and show hi alert to you,
when the page loaded for the first time it works fine and write another span on that dive as the same the old span but after that if you click on the new span it works not.
i did some test and found if i add this code :
$('.spn').on("click", function (e) {
showalert(this);
});
on the "spanwriter" function it will works , i mean if that function be like this:
function spanwriter(master) {
var rows = '<span class=\'spn\'>123</span>';
$('.divmain').html(rows);
<------- this event must be add here until it --------------->
$('.spn').on("click", function (e) { works
showalert(this);
});
}
why i should add click event at the end of wrote content until span can get that event and works?
i used jquery-1.10.2.js on my sample
my all codes are:
$(function () {
$('.divmain').on("click", function (e) {
spanwriter(this);
});
$('.spn').on("click", function (e) {
showalert(this);
});
});
function spanwriter(master) {
var rows = '<span class=\'spn\'>123</span>';
$('.divmain').html(rows);
}
function showalert(master) {
alert("hi");
}
you have to do the same but with document.on("click")
$(document).on("click", ".buttonClass", function() { console.log("inside"); });
$('.divmain').on("click" make a kind of binding when document is loaded, so when you add dynamix elements to the dom it is noit catched. Whith the use od document.on, it works even if you add dynamic content to the document.
The simplest and best solution to your problem is to attach the event listener to a parent element in the dom and pass the second parameter of the on() method as described in the jQuery documentation (http://api.jquery.com/on/)
In other words you should have something along the lines of:
$('body').on("click", ".spn", function (e) {
showalert(this);
spanwriter(this);
});
and then have the spanwriter() add the new span to the parent of the element it's been called upon.
I hope this is what you were looking for and answers your question.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 10 years ago.
I have this js code:
(function($, undefined) {
$("a").click(function(event) { //or another elemtnt
alert('Hello!');
})
})(jQuery);
And of course link:
Google
the JS code doesn't work, but if I change it to:
(function($, undefined) {
$("*").click(function(event) {
alert('Hello!');
})
})(jQuery);
all works!
If you've put your JavaScript before the a node is loaded the effect will be something like you described. Try this instead:
$(function () {
$("a").click(function(event) { //or another elemtnt
alert('Hello!');
})
});
This will invoke the anonymous function when the DOM tree is ready. Here is an example in JSFiddle.
When you use * as selector jQuery adds click handler to the html element, that's why you get the alert.
why don´t you try with document.ready?
$(document).ready( function (){
$('a').click(function (){
alert("a");
});
});
This is a possible solution:
$(document).ready(function() {
// put all your jQuery goodness in here.
});
why don't you give an ID to it and select for $('#my-id') for setting the event?
This question already has answers here:
How to select an element loaded through the jQuery load() function?
(2 answers)
Closed 6 years ago.
$(document).ready(function() {
$("img.tile").click(function() {
var actid = $(this).data().id;
$("#lz").load("/dialog/pre?actid=" + actid);
$("#btnCheck").click(function() {
alert("test");
});
});
The load() call brings in an HTML fragment that has an <input id="btnCheck" value="Check" />
But the event doesn't fire when I click on it.
Must have something to do with how the fragment is loaded. How do you make this work?
Correct, you either need to attached the click event after you are sure the data has loaded or use the live event to attach it. live will attach a handler if it finds it now or at any point in the future and is probably easiest to implement:
$("#btnCheck").live('click', function() {
alert("test");
});
Alternatively, you can attach it after you are sure the data has loaded. As #bzlm pointed out in his comment load is an asynchronous event so you can't assume it has finished in any subsequent code. Fortunately load allows you to pass a function as a second argument that will fire after all of the data has loaded:
$("#lz").load("/dialog/pre?actid=" + actid, function() {
$("#btnCheck").click(function() {
alert("test");
});
});
The best way would be to use delegate and take advantage of event bubbling to capture events on elements that may not yet exist. This is very easy, especially as you can work on the existing selection to provide a context:
$(document).ready(function () {
$("img.tile").click(function () {
var actid = $(this).data().id;
$("#lz")
.load("/dialog/pre?actid=" + actid)
.delegate("#btnCheck", "click", function () {
alert("test");
});
});
});
This is functionally equivalent to the load examples, but will have slightly better performance in several ways.
Try:
$(document).ready(function() {
$("img.tile").click(function() {
var actid = $(this).data().id;
$("#lz").load("/dialog/pre?actid=" + actid);
$("#btnCheck").live('click', function() {
alert("test");
}); });
This will pick up any elements added to the dom after the load event. A better way might be to use .delegate()