Jquery su evento non è vincolante per gli elementi non esistenti

Question

Ok qui l'esempio jsfiddle

http://jsfiddle.net/HTjCT/1/

Come si può vedere quando si passa non sta sparando evento mouseover

come posso risolvere questo problema?

sto usando Jquery 1,9

<div id='superdiv'>Click Me</div> 


$(function() { 
    $('#superdiv').on('click', function (event) { 
     $('body').append('<div id="super">another'); 
    }); 
    $('#super').on('mouseover', function (event) { 
     alert('not working'); 
    }); 
}); 

javascript

Answer 1

Devi usare "delegare", come questo (per la fornitura di "live") $('body').on('mouseover', '#super', function (event) {

Answer 2

Il div si desidera creare onclick, non sono chiusi con il tag '</div>'.

Che cosa succede se si tenta il seguente codice:

$(function() { 
    $('#superdiv').on('click', function (event) { 
     $('body').append(
      $('<div/>',{ 'id' : 'super', 'text' : 'tetet'}).mouseover(function(event) { 
        alert('test'); 
      }) 
     ); 
    }); 
}); 

Answer 3

Si può anche avvolgere il mouse sopra evento in una funzione e chiamala ogni volta che aggiungi nuovi elementi che vuoi siano interessati. In questo modo il problema segnalato da WickyNilliams non avrà alcun effetto su di te.

$(function() { 
    $('#superdiv').on('click', function (event) { 
     $('body').append('<div id="super">another'); 
     mouse(); 
    }); 
    function mouse() { 
     $('#super').on('mouseover', function (event) { 
      alert('not working'); 
     }); 
    }); 
    mouse(); 
}