title: Unable to called mouse related event after perform Ajax for my div
body: <p>I tried to use the mouseenter or other related event. But my function wont trigger. First, I have a div called article and I use jquery to append, to design its inner. But the jquery wont fired anything up. If i have mouse over.</p>
  
  <p>Then I revert back to the normal mouseover and mouseout using javascript also cant work. Please explain to me why this happen and how to work around it.</p>
  
  <p>I will always empty my article and perform a AJAX reload. like google search box</p>
  
  <pre><code>&lt;div id="article"&gt;  //Empty
  &lt;/div&gt;
  
  var over = function (myObj) {
    alert("A");  //NOT FIRE
  };
  
  var out = function (myObj) {
  };
  
  $(".items").mouseenter(function() { alert("A"); //NOT Fire });
  
  
  var myObject = JSON.parse(result, function (key, value) {
  
    if (key == "Name") name = value;
    if (key == "ProductId") id = value;
    if (key == "Url") {
  
      $("#article").append(
      "&lt;div class='items left' onmouseover='over(this)' onmouseout='out(this)'&gt;" +
       "&lt;div class='clear' style='height: 2px;'&gt;&lt;/div&gt;" +
     "&lt;/div&gt;");
    }
  }
  </code></pre>
  
  <p>//Note: After search in depth again. I realize it has something to do with delegate using on live from jquery. However, depsite that I am still unable to call those function</p>