Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am trying to use the on() event to handle dynamically created code. It works when the selector is hard coded in the on() event.
I would like to be able to have it select different elements based on which box they select.
$("body").on("change", $("#"+$(this).attr("id")) ,function()
When I run this the selector is undefined. Is there any way to make the selector dynamic?
When delegating events, jQuery generally expects the second argument in on() to be a string, as it's used as a filter internally etc.
Meaning, just pass the string instead of a jQuery collection
$("body").on("change", "#" + this.id, function() { ...
Of course, it makes very little sense to delegate to the body, filtering on an ID etc, when you already have the element you're targeting in this
$(this).on("change", function() { ...
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm testing some javascript on jsfiddle and for some reason I can't get a function to fire on a button click. Any advice?
jsfiddle link
In the Frameworks & Extensions panel, set onLoad to No wrap - in <body>.
It took me a while to figure this out.
You have configured JSFiddle to wrap the code in an onload event handler. Consequently the function you are trying to call onclick is out of scope.
Don't use intrinsic event attributes. Use jQuery's (since you are using jQuery already) event binding instead.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I add my TRIGGER DIV A over $(".DIVB").html(data); from a AJAx Responsebut when i now want to trigger some code over the $(".TRIGGER DIV A").click(function() it isnt working. Can someone explain me why ? And is there a Way to fix this or is there a working arround ?
It looks like you're using jQuery's .click(). If HTML is added dynamically to the DOM, you need to bind the click event to the element after it has been added. Otherwise, when $(".TRIGGER DIV A").click(handler) runs and jQuery looks for the element to bind, it isn't able to find it.
You may consider using .delegate() instead. This ensures that the event is bound to all elements relevant to the given selector regardless of when it is added to the DOM. You can find the documentation for usage here: http://api.jquery.com/delegate/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm creating a project and for it to be faster, I have chosen not to use jQuery(I would use only 5% of the full potential of the library).
In this project, I have a <textarea> element, and need to get the contents every time it changes. I have tried different examples, but none worked.
How do I write the following code using Vanilla JavaScript and native DOM Events?
$("#textarea").bind('input propertychange')
// or
$("#textarea").bind('change')
jQuery .change() is an alias for native change event.
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
You can use it fairly simple:
// Non-obtrusive JavaScript example(preffered).
element.addEventListener('change', callback, false);
// Somewhat obtrusive (not recommended).
element.onchange = function () { ... };
// Obtrusive JavaScript in HTML (not recommended).
<input type="text" onchange="function() { ... };">
Here's the plain vanilla js way to change content in the DOM.
document.getElementById("textarea").innerHTML = put your new HTML here
Also you probably want to pick a better id than textarea as that's awfully generic.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
i mean i wanna iterate manually using a for-loop or something. but this piece of code i came up with seems to be not working. i like combining javascript with jquery since jquery is not my cup of tea for major projects. i don't know much jquery either, i would say I'm beginning to learn, though. how do you iterate over a nodelist in jquery is the question i have for all those jquery fans this time. is it similar to the javascript way? anyway this is what i have come up with (the code of a beginner).
$("sn"[i]).fadeIn();
$("sn"[i]) the part which failed, according to google chrome.
try this:
$("sn[" + i + "]").fadeIn();
I think you mean that "sn" is the selector for the nodes, in that case:
$("sn").fadeIn();
This works on all the elements that match the selector, jQuery will do the iteration. However if you want to select all elements that have the 'sn' class you should prefix the selector with a . like so: ".sn"
if you want to loop manually try:
$(".sn").each(function(i) {
$(this) // do some magic with the individual element here
});
See more on iterating with each here:
https://api.jquery.com/each/
Assuming sn is a variable containing the node list, you are probably looking for
$(sn[i])
or
sn.eq(i)
if sn is already a jQuery object.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Many of you probably encountered this situation. For example you have a jQuery fade effect that fires on mouse over a link. At some point you add new links in the document trough ajax, so you need to apply the fade effect to them too.
There are two possibilities:
you call the fade function again after the ajax completes
you use something like livequery in your initial document.ready function to apply the fade on the links
Which method would you choose and why?
livequery adds overhead that is simply unnecessary unless you just don't have access to the javascript that is adding the dynamic elements.
If you're talking about event handlers that are triggering the fade, then you could use jQuery's event delegation capabilities the delegate()[docs] method (preferred) or the live()[docs] method .
If you're not talking about event handlers, then I'd definitely go with applying the code yourself in a callback to the AJAX request. livequery is slick, but should be an absolute last resort in my opinion.
jquery has a native function that does this without the need of an extra plugin. see $.live()
Edit: furthermore, your first option seems like code smell to me. keep it DRY and use $.live()