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?
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
html:
<div class="testSpanDiv"></div>
javascript:
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
}
$('#testSpan').on('click', function(){
$(this).parent().remove();
});
Event is not firing while giving a click to span element added dynamically.
Event is firing if span element is statically added to the html.
Can you give any suggestion over it.
I tried like below also, but not working.
$('#testSpan').on('click', '.testSpanDiv', function(){
$(this).parent().remove();
});
You need to use like this:
$('.testSpanDiv').on('click', '#testSpan', function(){
// ^^ parent div ^^ element in which you want to bind the function
$(this).parent().remove();
});
your syntax error try this way
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
$('#testSpan').on('click', function(){
$(this).parent().remove();
});
});
https://jsfiddle.net/7x8jbLpt/
You can delegate the event from body
Also note there are some syntax error in your code
$(document).ready(function () {
$('.testSpanDiv').append('<span id="testSpan">Hello</span>');
})
$('body').on('click', '#testSpan', function(){
alert("Hello")
});
JSFIDDLE
This question already has answers here:
jQuery (almost) equivalent of PHP's strip_tags()
(9 answers)
Closed 8 years ago.
I'm looking for a function that's exactly like
$str = striptags($str, 'span');
in PHP. I need the same type of function in jquery:
$("#str").on('click keydown keyup change keypress', function(e) {
e.preventDefault();
???
)};
Is it simple like in PHP? or it's something more complicated?
Give this jQuery a try:
$('#str').on('click', function(e) {
$('body').find('*').not('span').each(function() {
$(this).remove();
});
});
You'll have to adjust its target to whatever parent you want to clear the content of, but this should work.
Edit
I've updated it to account for if the element is contained in a span, at some point:
$('#str').on('click', function(e) {
$('body').find('*').not('span').each(function() {
if(!$(this).parents().is('span')) {
$(this).remove();
}
});
});
If you only want to accommodate for a single level up, replace parents() with parent() in the if statement.
Here's a JSFiddle: http://jsfiddle.net/y1r0wg2r/
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');
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why does jQuery or a DOM method such as `getElementByID` not find the element?
I load the file using jquery.load(). In my load_to.html I am targeting the element with id as
$('#users').change(function() {
alert('hello');
});
this element is present in load_from.html. I couldn't able to target this. But when I inspect the page I can able to see this element.
I loaded the page like this
$('#mydiv').load('/user/1/edit form');
How to target the element?
Use on in it's delegate signature:
$('#mydiv').on('change', '#users', function() {
alert('hello');
});
Read the docs
Try to set up your events in the callback from .load to make sure they are created once the elements enter the DOM.
$('#mydiv').load('/user/1/edit form', function () {
//Callback
//set up events here (once it is finished loading)
$('#users').change(function() {
alert('hello');
});
});
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()