Question

I have some link elements which are dynamically added and hidden from the page.

They are generated by a third party telerik control.

I want to change the name of the text, and unfortunately the only way is to use jquery.

I have generated the rule (selector) that catches the Edit links when they are shown. But on initial page load no edit links will be visible. After the user clicks something, these links will be created. After the user clicks something else, these will hide, some other links will show. These are the links I need to change the text on.

How can I write jquery code so that whenever an element matching that selector is added to the page, the button text is updated ?

Thank you!

Edit0

I have no control over how they are generated.

There are two grids, parent at top, child at bottom. Initially child is hidden. A row is selected in the top grid, the bottom grid shows items for that selection. This is the point at which these links are added to the page (asynchronously via AJAX), so they are not in the DOM (edit links for each child item in the child grid).

Hope that makes more sense.

Edit1

//catches the links
$("#CustomClass .t-button.t-grid-edit").text("Awesome text instead of Edit");

Answer 1

If you’re using jQuery 1.7+, you need to use on to assign event handlers to current and future DOM elements that meet your selector criteria.

If you’re using earlier versions of jQuery, you should use delegate.

You state that you don’t have control over how they are generated, but do you have control over adding the content to the page? If so, you could use custom events (perhaps) and the use of on/delegate to handle the new items being added to your grid.

Here’s a fiddle demonstrating this — http://jsfiddle.net/dhoerster/xLvYE/

Again, not sure if this helps. I’ll delete if I’m not understanding this correctly. Hopefully this helps.