jQuery & jQueryUI Base

by Smit Raval

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<input type="button" id="addItem" value="Add item" />

<div class="itemContainer">
  <div class="item" id="item1" contenteditable="true">
    Item 1
  </div>
  <div class="item" id="item2" contenteditable="true">
    Item 2
  </div>
</div>

JavaScript

$(function() {

  $("#addItem").click(function() {
  	$(".itemContainer").append('<div class="item" id="item3" contenteditable="true">Item 3</div>');
  });
  
  $(document).on("blur",".itemContainer [contenteditable]",function() {
		alert($(this).html());
  });
  
});