evento keypress su elemento renderizzato dinamicamente

**bstefano79** · 25-01-2013, 20:33

quando carico una pagina ho questo html, javascript e css

file css

Codice PHP:


.oldcat

{

    border: solid 1px #00CC00;

}



.oldcatm

{

    border: solid 1px #FFCC00;

}

html appena caricato

Codice PHP:


<div id="corpoform">

     <form action="gescat.php">



     <div id="fcat"><div class="inputcat" id="v1">

             <input class="oldcat" id="1" name="cat[1]" value="Camere" />  


      </div></div>

      </form>

</div>

js

Codice PHP:


$(document).ready(function(){



        $('.oldcat').keypress(function() {

                $(this).toggleClass("oldcat");

                $(this).toggleClass("oldcatm");

                mod=true;

                    alert('pressione');

            });    

    });

tutto questo appena caricato funziona, se modifico dinamicamente l'input all'interno del div così (viene eseguito su l'evento onchange di un select) l'input di classe oldcat viene renderizzato ma il keypress non funziona + qualcuno sa dirmi il perchè

Codice PHP:


$("#inputcat").html("<input class=\"oldcat\" value=\"pippo\" \>");

**bstefano79** · 26-01-2013, 03:01

ok per semplificare ecco un esempio appunto + semplice

Codice PHP:


<html>

<head>

<script src="jquery.js"></script>



<script>

  $(document).ready(function () {

      $("#input1").keypress(function() {

          alert("click input1");

    });



    $("#input2").keypress(function() {

          alert("click input2");

    });



        $("#corpo").append("<input id='input2' />");

  });



</script>

</head>

<body>

<div id="corpo">



    <input id="input1" />

    


</div>

</body>

</html>

il click input 1 funziona mentre sull'input2 renderizzato con l'append nel div non funziona! mi potete illuminare?

**cavicchiandrea** · 26-01-2013, 09:55

Invece d'usare keypress direttamente sull'elemento usa delegate/live/on dipende che versione hai di jquery http://api.jquery.com/category/event...er-attachment/

**bstefano79** · 26-01-2013, 13:58

Ciao! grazie per la risposta sei gentilissimo, provo e ti faccio sapere

la versione è la 1.9 l'ultima

**bstefano79** · 26-01-2013, 14:05

funziona grazie infinite, scrivo qui sotto il codice funzionante

Codice PHP:




<html>

<head>

<script src="jquery.js"></script>



<script>

  $(document).ready(function () {

      $("#input1").keypress(function() {

          alert("click input1");

    });





$("#input2").live({

    keypress: function() {

        alert("click input2");

      }

});



$("#corpo").append("<input id='input2' />");

  });



</script>

</head>

<body>

<div id="corpo">



    <input id="input1" />

    


</div>

</body>

</html>

**bstefano79** · 26-01-2013, 16:16

dato che live è deprecato posto lo stesso codice funzionante con on

Codice PHP:


<html> 

<head> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>



<script> 

$(document).ready(function () { 



    $("#input1").keypress(function() { 

          alert("click input1"); 

    }); 





    $('#corpo').on('keypress','#input2',function(){

        alert("click input2"); 

    });



    $("#corpo").append("<input id=\"input2\" />"); 

}); 



</script> 

</head> 

<body> 

<div id="corpo"> 



    <input id="input1" /> 

    
 

</div> 

</body> 

</html>

Discussione: evento keypress su elemento renderizzato dinamicamente

Strumenti discussione

Ricerca discussione

Visualizza

evento keypress su elemento renderizzato dinamicamente

Permessi di invio