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()
Related
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 6 years ago.
Improve this question
What's the best way to implement this:
I have multiple elements that will need to do some sort of calculations whenever a global event happens (ex. resize, scroll).
I can either
Add each element to an array then have a single listener for the event and whenever it happens, run a handler that takes the array and loop through each to perform its calc
or
Have each element listen to the single global event
Is there any methods I'm missing?
Add each element to an array then have a single listener for the event
and whenever it happens, run a handler that takes the array and loop
through each to perform its calc
- this; attach a single event handler to a document/body element and do whatever you want in it.
Why: because it has less memory/performance overhead and is a lot more maintainable (which is, in case of JavaScript, often overweights everything else).
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 to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I've been writing Javascript with jQuery for a while, I can make it do what I want, but I've never written anything really reusable or modular. Now it's time for me to take that step and write proper reusable Javascript.
I thought I'd start with something I've implemented countless times, a confirm delete dialog. I want to be able to specify a function to execute on confirm and a function to execute on cancel.
The way I see this working (and this is open to criticism) is to do something like:
$(element).confirmDialog(function(){
// this is the cancel callback
},
function(){
// this is the confirm callback
});
I'd also like the dialog to show based on a data attribute on the link, rather than having to write an .on('click'... handler each time, but I don't know how to 'link' the specific confirmDialog with the function which handles the .on('click'....
This is really as far as I've got so far. I know that as I want to be able to add the functionality to any element I need to define confirmDialog() as $.fn.confirmDialog = function(){...}.
Although I can implement the entire thing in an ad-hoc way, I'm unsure as to how to implement this functionality as a clearly defined, loosely coupled reusable module.
Could someone help me get my head around how to structure this module, or provide a link to a very thorough tutorial which is specifically about writing reusable Javascript?
You can read more about how to create jQuery plugins at the following links:
http://learn.jquery.com/plugins/basic-plugin-creation/
http://www.codeproject.com/Articles/291290/How-To-Write-Plugin-in-jQuery
NetTuts videos are particularly useful:
http://net.tutsplus.com/articles/news/learn-how-to-create-a-jquery-plugin/
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 8 years ago.
Improve this question
I have this js that beginning so:
$( "#map-page" ).live( "pageinit", function()
{
//Here the body function
});
I would load this function after the page has completed to load.how can i do?
Update: Looks like this method won't work with jQuery mobile (strangely enough).
Try this instead:
$(document).ready(function () {
$("#map-page").doWhatever();
})
For what you want, I think that load suits better
You can read about it here http://api.jquery.com/load/
You should be more clear that you're referring to jQuery Mobile, anyways the best way is to bind a live event to the pagecreate/pageshow event that's triggered on the <div data-role="page">
If you want the code to run just once use pagecreate, if it needs to run everytime the page is shown (there is dynamic data) then use pageshow and fetch any changes via AJAX. Please note if you re-navigate to the page again via the back button etc, it may be fetched from memory in which case your html won't be updated - you must use non-AJAX loading or update your DOM via AJAX in the pageshow
Use an id or class to properly attach the listener, here's a more detailed answer I wrote: https://stackoverflow.com/a/9085014/737023