Using .on() to Trigger Events For Newly Injected Elements - Embed Codes Example

SO: http://stackoverflow.com/q/12520751/570918

by bizamajig

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<a href="#" id="add">Add</a>
<div id="container">
    <input type="text" class="sub-element" name="in" />
</div>

<!-- Example 3: -->
Example 3:
<ul id="mylist">
    <li>Hello</li>
    <li>World</li>
</ul>

<button>Click </button>

JavaScript

//Example 1:
$( 'body' ).on( 'biz-content-update', '.sub-element', function(){
    $(this).html('<div><b>yaay!</b></div>').fadeIn();
    alert(' 1111111111111111111111111111111' + '<br />' );
})
    
$( 'body' ).on( 'click', '#add', function(){
    $( '#container' ).append('<div class="sub-element">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>').children().last().trigger('biz-content-update');
});

$( '#container' ).append('<div class="sub-element">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>').children().last().trigger('biz-content-update');

/*
//Example 2:
$('body').on({
   DOMNodeInserted : function(){
      alert('I have been added dynamically');
   },
   click : function(){
      alert('I was clicked');
   },
   '.sub-element'
});
    
$('#container').append('<div class="sub-element">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>');
$('#container').append('<div class="sub-element">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>');
*/

//Example 3:
var i =0;
$( 'button' ).click(function(){
    $( '#mylist' ).append( '<li>' + ++i + '</li>') ;
    $( '#container' ).append('<div class="sub-element">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>');
});

$( document...