CODEWITHSUNDEEP
javascriptjqueryhtml
Emanuele Ugo
Emanuele Ugo

Reputation: 91

.on jquery method and button dynamically created

Good morning I have a problem with jQuery .on(). my JavaScript says 

$(document).ready(function() {
    $("button[name='modificaProva']").on("click",function(event){
        event.stopPropagation();
        if($('#gestioneProva').is(":visible")){
            $('#gestioneProva').slideToggle();
        }
        else{
            var provaSelected=$("input[name='provaSelected']:checked").val();
            var idProva=parseInt(provaSelected);
            if(isNaN(idProva)){
                alert("L' id della prova selezionato risulta non essere un numero. Prova a riaggiornare la pagina e se l'errore persiste contatta un amministratore");
            }
            else{
                getDettagliProva(idProva);
            }
        }
   });
});

my HTML says:

<p class="submitProve"><button type="button" name="creaProva">Crea Prova</button></p>

then I need to add dynamically a button called "modificaProva" and I use this code:

$(".submitProve").append('<button type="button" name="modificaProva">Mostra/Nascondi Dettagli Prova</button>');

The button was added after some other stuff,it appears on the screen in the correct position but when I click on it nothing appends. If I create the button when the page loads all works fine.The method on must work also if the element doesn't exist.

Upvotes: 1

Views: 75

Answers (3)

CIRCLE
CIRCLE

Reputation: 4879

For the new created button you need to change .on() to .live() like this: 

$('button[name="modificaProva"]').live('click', function(){
   ... your code
});

Upvotes: 0

Harry
Harry

Reputation: 89760

Since it is a dynamically created element, you must use event delegation like below:

$(".submitProve").on("click","button[name='modificaProva']", function (event) {
    //rest of your onclick event code.
});

Note: We are delegating from .submitProve because it is the closest static element. If it is not static, you can delegate from $(document).

Demo Fiddle

More information on delegation could be found here.

Upvotes: 2

Adil
Adil

Reputation: 148150

You need to use event delegation, delegate event to parent or document to bind event to dynamically added elements.

$(document).on("click", "button[name='modificaProva']", function(event){
    event.stopPropagation();
    if($('#gestioneProva').is(":visible")){
        $('#gestioneProva').slideToggle();
    }
    else{
    var provaSelected=$("input[name='provaSelected']:checked").val();
    var idProva=parseInt(provaSelected);
    if(isNaN(idProva)){
        alert("L' id della prova selezionato risulta non essere un numero. Prova a riaggiornare la pagina e se l'errore persiste contatta un amministratore");
    }
    else{
    getDettagliProva(idProva);
    }
 }});

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers, jQuery api.

Upvotes: 1

Related Questions