Defining styles and events for dynamically added dom elements

Question

I'm trying to define a few events and styles for elements that will be dynamically added to the DOM based on user interaction with the application. I see that the live() method can be used for the events but I can't figure out how to apply the styles and more specifically rules like the one below using the live() method.

$('a.button').button(); //jquery-ui call to turn links into cool buttons

This answers your question : http://stackoverflow.com/questions/3028912/ — JohnP, Mar 09 '11 at 11:24

score 0 · Answer 1 · answered Mar 09 '11 at 11:24

The concept is to create a custom event say buttonCreatedEvent. The event is triggerred if a button is created(using the trigger() function). You can bind the event using live(). In the callback function of live() then you can tell the script to create the jqueryui button.

score 0 · Answer 2 · answered Mar 09 '11 at 11:32

0

The better way would be to use css for this and not javascript, that way anything you add dynamically will automatically have the right style.

answered Mar 09 '11 at 11:32

Martin Jespersen

25,743
8
56
68

score 0 · Answer 3 · answered Mar 09 '11 at 11:37

0

$('a').addClass('mycoolclass')

http://api.jquery.com/addClass/

.mycoolclass {
  display:block;
  border: solid 1px black;
  padding:10px;
  background: #CCC;
  color: black;
  text-decoration: none;
}

This would make all your a's look like black and white custom buttons or something.

answered Mar 09 '11 at 11:37

Techism

534
3
11

Additionally: I just noticed your question says you are having trouble applying "live". – Techism Mar 09 '11 at 18:55

Defining styles and events for dynamically added dom elements

3 Answers3