I have a web layout, which can have many links on those links dynamically, AJAX functions Using. And it works fine.
But, I do not know how I can work with those "dynamically-generated links" (ie, if I click on them, how to call some JS or jQuery function). I think the browser can not be recognized because since the page has been loaded.
Is there a function, which can render my pages and elements on it?
TNX at Ed on your support!
You can use the following methods of jQuery:
First, < Code> .live () method, and the second is .delegate () method.
Usage is a lot easier:
$ (document) .ready (function () {$ ("# dynamicElement"). Live ("click", Function () {// do As you can see, the first argument is the event that you want to bind, and the other is a function that handles the event. The way it works it is not exactly the same as "Re-rendering". The usual way to do this (click on $ ("# dynamicElement"). Click (...) or $ ("# dynamicElement"). Bind ("Click" ", ...) ) is an event of a scheduled eve Adds the indexer when the dom is loaded properly then the entry in the DOM element ( $ (document) .ready (...) ) Now, of course, it is dynamically Will not work with generated elements, because they are not present when DOM loads first. The way .live () works, instead of adding the vent handler to the DOM element, Connects to the document element, leverages the bubble-up property of JS & amp; ; DOM (When you click on the dynamically generated element and no event handler is attached, it keeps on looking at the top until it gets one.)
Looks very clean, right? But there is a little technical problem with this method, as I said, this event connects the handler to the top of the dom, so when you click on the element, your browser has to transmit all the dom trees, as long as That this incident did not get the proper handler. The process which is very inefficient, the way. And here is where the .delegate () method appears.
Suppose the following HTML concept:
& lt; Html & gt; & Lt; Top & gt; ... & lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "link-container" & gt; & Lt ;! - Here's the dynamically generated content - & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt; Therefore, instead of binding the event handler at the top of the DOM, with the .delegate () method, you can attach it to a parent dom element. A DOM Element You are sure that it will be somewhere above the dynamically-generated content in the DOM tree. The closer it will be, the better it will work: $ (document) .ready (function () {$ ("# links-container") representative ("# dynamicElement It was a long answer, but I want to explain the principle behind it. P> Edit: You should fix your markup, it is invalid because: 1) Anchor does not allow the value to be used in the attribute, and 2) you have 2 with the same ID Can not contain more tags. Try it out: & lt; A class = "removeLineItem" id = "delete-1" & gt; Remove & lt; / A & gt; & Lt; A class = "removeLineItem" id = "delete-2" & gt; Remove & lt; / A & gt; & Lt; A class = "removeLineItem" id = "delete-3" & gt; Remove & lt; / A & gt;
and to determine which one of the anchors was clicked
$ (document) .ready (function () {$ ( "# Links-container") .delegate (". RemoveLineItem", "click", function () {var anchorClicked = $ (this) .attr ("id"), valueclicked = anchorclicked.split ("-") [1 ];}}}
With that code, you will click the ID of the link link selected in the anchor, and select the number associated with the anchor in the value.
< / Div>
Comments
Post a Comment