Geek Answers Handbook

How to work with dynamically created fields?

I have a web layout that can contain multiple links on it. These links are dynamically created using AJAX functions. And it works fine.

But I don’t know how I can work with these “dynamically created links” (for example, how to call some JS or jQuery function if I click on them). I think the browser cannot recognize them, because they are created after the page loads.

Is there any function that can redraw my page and elements on it?

Tnx adv about your help!

+7
javascript jquery dynamic-data
source share
7 answers

You can use the following two jQuery methods:

The first is the .live() method, and the other is the .delegate() method.

Using the first is very simple:

 $(document).ready(function() { $("#dynamicElement").live("click", function() { //do something }); }

As you can see, the first argument is the event you want to bind, and the second is the function that processes the event. The way this works is not quite like re-rendering. The general way to do this ( $("#dynamicElement").click(...) or $("#dynamicElement").bind("click", ...) ) works by attaching the event handler of a specific event to the DOM element when correctly loading the DOM ( $(document).ready(...) ). Now, obviously, this will not work with dynamically generated elements, because they are not present when loading the DOM.

The .live () path works, instead of attaching the valve handler to the DOM element itself, it attaches it using the document element, taking advantage of the JS and DOM bubbling property (when you click on a dynamically generated element and the event handler is not attached, it continues to look up until it finds it).

Sounds pretty neat, right? But, as I said, there is a small technical problem with this method, it attaches an event handler to the top of the DOM, so when you click on an element, your browser should traverse the entire DOM tree until it finds a suitable event handler. A process that is very inefficient, by the way. And here, where the .delegate() method appears.

Assume the following HTML structure:

 <html> <head> ... </head> <body> <div id="links-container"> <!-- Here where the dynamically generated content will be --> </div> </body> </html>

So, with the .delegate () method, instead of binding the event handler to the top of the DOM, you can just bind it to the parent DOM element. DOM element are you sure that it will be somewhere from dynamically generated content in the DOM tree. The closer to them, the better it will work. So this should do the magic:

 $(document).ready(function() { $("#links-container").delegate("#dynamicElement", "click", function() { //do something }); }

It was a long answer, but I like to explain the theory underlying it, haha.

EDIT: You must correct your markup, this is not valid because: 1) Anchors do not allow the use of the value attribute, and 2) you cannot have 2 or more tags with the same identifier. Try the following:

 <a class="removeLineItem" id="delete-1">Delete</a> <a class="removeLineItem" id="delete-2">Delete</a> <a class="removeLineItem" id="delete-3">Delete</a>

And to determine which of these anchors was pressed

 $(document).ready(function() { $("#links-container").delegate(".removeLineItem", "click", function() { var anchorClicked = $(this).attr("id"), valueClicked = anchorClicked.split("-")[1]; }); }

With this code, you will save the link identifier in the anchorClicked variable, and the number associated with the anchor in valueClicked.

+6
source share

In the page initialization code, you can configure the handlers as follows:

 $(function() { $('#myForm input.needsHandler').live('click', function(ev) { // .. handle the click event }); });

You just need to be able to identify input elements by class or something like that.

+3
source share

How are these links dynamically created? You can use the correct selector , given that they use the same class name or are in the same tag, etc.

0
source share

Noramlly, the response of the HTML browser process and add it to the DOM tree, but sometimes the current specific events just don't work, just re-initialize the event when you call the ajax request.

0
source share

consider the html form

 <form> <input type="text" id="id" name="id"/> <input type="button" id="check" name="check value="check"/> </form>

jquery script

 $('#check).click(function() { if($('#id).val() == '') { alert('load the data!!!!); } });

here, by clicking the script button, check the value of the text field id as null. if its value is null, it will return a warning message .... I'm thin is the solution you are looking for .....

A good day.

0
source share

All you need to do to work with dynamically created elements is to create identifiers with which you can find them. Try using the following code in the Firebug console or the developer tools for Chrome or IE.

 $(".everyonelovesstackoverflow").html('<a id="l1" href="http://www.google.com">google</a> <a id="l2" href="http://www.yahoo.com">yahoo</a>'); $("#l1").click(function(){alert("google");}); $("#l2").click(function(){alert("yahoo");});

You should now have two links that usually had an ad that was dynamically created and the onclick handler was added to trigger a warning (I did not block the default behavior, so it will force you to leave the page.)

jQuery.live will allow you to automatically add handlers to a newly created element.

0
source share

If your links come in via AJAX, you can set the onclick attributes on the server. Just output the links in AJAX as follows:

 <a href="#" onclick="callYourFunctionHere();return false;">Holy crap I'm a link</a>

return false ensures that the link does not reload the page.

Hope this helps!

-one
source share

More articles:


All Articles