jQuery, best practice for passing around variables in the DOM? -


I have a DOM element similar to Facebook's "View friends" popup. I have a table with the list of rows , On which I can add tags to those lines:

  & lt; Tr id = "124" & gt; & Lt; / Tr & gt;  

When a line is clicked, a model popup is created and lets the user select tags related to those rows, which are sorted like this:

  & lt; Div class = "popup" & gt; & Lt; Div class = "popup-body-row" id = "3434" & gt; Add Tag 3434 & lt; / Div & gt; & Lt; Div class = "popup-body-row" id = "2112" & gt; Add Tag 2112 & lt; / Div & gt; //e.t.c. & Lt; / Div & gt;  

I have the following javascript:

  $ ('.popup-body-row'). Live ('click', function (event) {Var popuproid = event.currentTarget.id // post server to be left}};  

This popup gets the ROID, but does not get the initial element to associate with popupROM. I can create popups so that the TRID ID is attached to it:

   

And then add this line to my JavaScript:

  var trRowId = e.currentTarget.parentNode.id;  

This works, but if I start adding elements to my popup divas so that the parent node is no longer a parent node, then it will break and let me rewrite it Will happen. / P>

Any advice would be appreciated, but the way I am doing I have a definite "code odor". Thanks!

Editing: short version , I have a row element, each one is linked to a unique object. I have placed the id's id as a specialty. When I click on that row element, a complex (complex) dom element is created, allowing the user to get the option of the tags associated with the row element. If I use "Parentnode" to know which line was clicked, if my designer comes in and adds an element to the popup then it breaks. What is the best solution for this? Associating the tr que id with the class "popup" and then adding the tag when searching the whole DOM for the class? Or, by putting the tr id on all the devil elements in the popup, even if my designer adds a new parent, will the ID promote it?

I think anything wrong in adding id Not on the clicked line popup but you can not store it as a id attribute because they should be unique. Instead, use the HTML5 attributes of data attributes that work perfectly with older browsers.

If you are concerned about the reconstruction of the popup div, then explicitly the ParentNode relationship, but for example popups Trust the class (which should be unique within the popup for the discrepancy), or a specific attribute, both are present only on the root popup node.

I am proposing the flow of such events:

  1. User ID = "124"
  2. Show the popup and record the ID there - & lt; Div class = "popup" data-current-line = "124" & gt; ..
  3. Popup is clicked, then find the nearest parent with the multiplier data-present-line and get its value.

Setup popup live click handler:

  $ ('popup-body-row') Live ('click', function () {// By searching for the nearest popup, you break the explicit parent // By storing the data inside the node relation HTML 5 data attribute, you are not copying the ID. // Originally, a win-win situation for all Var Popup = $ (this) .closest ('[Data-Current-Line]'); Var associatedRowId = popup.attr ('Data-Present-Line' );});  

Comments

Popular posts from this blog

c# - sqlDecimal to decimal clr stored procedure Unable to cast object of type 'System.Data.SqlTypes.SqlDecimal' to type 'System.IConvertible' -

Calling GetGUIThreadInfo from Outlook VBA -

Obfuscating Python code? -