JQUERY

Select jquery generated elements

When an HTML document loads, the javascript associated with it are also loaded. Events are assigned to their elements like onclick, onchange, mouseover, keyup etc. These functions start to work after page is fully loaded. But modern javascript frameworks are so advanced that most of the html contents are generic type. You wont find proper html content on page view source. So any javascript or jquery event associated with it are not going to work. Because DOM has not recognized those generated elements. To select jquery generated elements we need to perform certain hack kind of stuff.

Select jquery generated elements

Fortunately there are lot of methods to select jquery generated elements. One of the best method is to use the super parent element which is already compiled during page load.

Create a parent element

Create a button B1 to generate a child element.

We will add an event on click of B1 to generate another button B2. Lets load jquery api first.

Since all above elements are to be loaded during page load and an event associated with B1, so we need to write jquery on ready of document. Then we will write jquery to generate another button B2 and write an event for B2 also, lest see if event for generated button B2 works or not.

Select jquery generated elements
Select jquery generated elements

Now write code to add event for B2.

First we click on B1 to generate child

Select jquery generated elements
Select jquery generated elements

Child element is successfully generated because an event for B1 is already loaded during page load. That is both jquey and elements were loaded at page load. We already have written jquery to show an alert on click of B2. Now if we click on “SAY HURRAY” nothing will happen because DOM is not applied on B2. But there are several ways to sort it out.

Invoke generated button using parent element in jquery

Select jquery generated elements
Select jquery generated elements

We can also use body tag if no parent element is found

However there are a lot of ways to do so. Another way is to assign onclick event on generated item.

The only disadvantage of using inline event is string assignment problem. It is too difficult to assign quotation marks to strings that are already inside quotations. Another way is to load the script after generated content.

That’s all guys this is just a quick tutorial to demonstrate how to select jquery generated elements. Please subscribe to get more updates on Javascript Solutions.

Share

Leave a Comment

Your email address will not be published. Required fields are marked *