jquery gets dynamically generated HTML inside tags or elements

In the afternoon to share the "MVC edit state two DropDownList linkage" http://www.cnblogs.com/insus/p/3426563.html soon, a netizen asked about the three-level linkage example. Insus.net reply him, will do two level linkage, level three should not be difficult. The principle and method are the same.

The purpose of this article is to deal with how jquery gets the tags or elements of the dynamically generated HTML.
Or go back and look at the article with the header specified link. At first, Insus.net used jquery's Ajax to produce a row of data and append to

<tbody id= "Tbody1" ></tbody>

However, in subsequent jquery it is hard to find append HTML tags or elements. In order to find two select drop-down lists, insus.net can only write the relevant code in

function Outputdata (tbody, item) {}

Within this custom function.
That's not what insus.net wanted. Do not like to put what code are written in a function, so that future maintenance brings considerable confusion. When it was finished, only the implementation of the function. Now, Insus.net decided to refactor this part again. As much as possible, it can be extracted and split into smaller, separate functions.

The first one that can be extracted is a linkage event:


Take it off and move out of this custom function:



The change function needs to be changed to the syntax of the #93 line, in addition to a drop-down list of two select in the event, as well as to the #96 and #98 rows, one to get the control, the other to get its value, and the other to get the control.

The second movable place is a partial code for that updated data:



Can be written in a single Independent

$ (document). Ready (function () {}

Where the code changes, refer to the highlighted section:



After this refactoring, the code that can break out of this function is moved to

function Outputdata (tbody, item) {}

Outside of this custom function.

After refactoring, this view is full of code: