jQuery On Click non funziona

Question

Ho problemi a far sparare il gestore di eventi. Sto chiamando JSON nella pagina come di seguito. Quindi voglio essere in grado di fare clic su uno dei pulsanti che ho creato che eseguirà l'avviso 'ciao li'. Funziona con tutti gli altri elementi della pagina, ma non con lo <button>.

Qualcuno può aiutare?

test.js

$(document).ready(function() { 
    $.getJSON('/api/v1/recipe/?format=json', function(data) { 
    $.each(data.objects, function(i, recipe) { 
     $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
     }); 
    }); 

    $('rmv').on('click', function() { 
     alert('hello there!'); 
    }); 
    }); 

recipe.html

{% extends 'base.html' %} 

{% block content %} 
<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span6"> 
     <form action='' method="post">{% csrf_token %} 
     {{ form.as_p }} 
     <input type="submit" value="go baby!"> 
     </form> 
    </div> 
    <div class="span6"> 
     <table class="table table-striped table-bordered" id="recipes"> 
     <tr> 
      <th>Title</th> 
      <th>Ingredients</th> 
      <th>Method</th> 
      <th>Remove</th> 
     </tr> 
     </table> 
    </div> 
    </div> 
</div> 
{% block recipes %}{% endblock recipes %} 
{% endblock content %} 

Answer 1

avete il selettore di sbagliato dovrebbe essere

$('#rmv') 

e se si stanno aggiungendo il elemento dinamicamente dovresti utilizzarlo come

$(document).on('click','#rmv',function(e) { 
    //handler code here 
}); 

vostro loop nella chiamata ajax successo di nuovo probabilmente produrrà elementi con ID duplicati, che è sbagliato, così come detto @Alnitak è possibile passare alla selezione della classe come dopo la modifica del cde

$.getJSON('/api/v1/recipe/?format=json', function(data) { 
    $.each(data.objects, function(i, recipe) { 
    $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn rmv" type="button" >remove</button></td></tr>'); 
    }); 
}); 

e il selettore sarà simile

$(document).on('click','.rmv',function(e) { 
    //handler code here 
}); 

Answer 2

Prova questa. Spostare il codice all'interno callback

$(document).ready(function() { 
     $.getJSON('/api/v1/recipe/?format=json', function(data) { 
      $.each(data.objects, function(i, recipe) { 
       $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
      }); 

     $('#rmv').on('click', function() { 
      alert('hello there!'); 
     }); 
     }); 


    }); 

O utilizzare jQuery.on

$(document).on("click", "#rmv",function() { 
       alert('hello there!'); 
      }); 

Answer 3

$.getJSON('/api/v1/recipe/?format=json', function(data) { 
      $.each(data.objects, function(i, recipe) { 
       $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); 
      }); 
      $('rmv').on('click', function() { 
       alert('hello there!'); 
      }); 
     }); 

Fissare il gestore di eventi nella funzione di successo della vostra richiesta AJAX.

Modifica - Come per gli altri, il vostro selettore rmv è sbagliato, dovrebbe essere #rmv

Answer 4

In primo luogo, assicurarsi che non ci sia più di un elemento con ID rmv. Gli ID devono essere unici, ma sembra che tu stia aggiungendo più ricette, ognuna con il proprio pulsante "Rimuovi".

Hai anche problemi con la registrazione del gestore di eventi - non stai aspettando che la chiamata AJAX termini (e poi aggiungi la riga della tabella) prima di registrare il gestore di eventi.

Questo può essere risolto registrando il gestore di eventi all'interno del AJAX success richiamata, ma dato il primo problema con il tuo ID, la soluzione migliore sarebbe quella di utilizzare una classe (.rmv) al posto di un documento di identità e quindi utilizzare:

$('#recipes').on('click', '.rmv', function() { 
    var $tr = $(this).closest('tr'); 
    // do something with the current row 
}); 

il codice di cui sopra possono essere registrate al di fuori della success richiamata perché utilizza delegazione evento. Si basa sull'evento click che bolle alla tabella che lo contiene (che esiste già), invece di registrare direttamente l'evento su ciascun pulsante mentre vengono creati.

Answer 5

$('#rmv', table).on('click', function(){ 
    alert('hello there!'); 
}); 

Answer 6

funzione Jquery richiede un simbolo '#' da aggiungere se si utilizza id di un elemento per attivare qualsiasi chiamata. Così Cambiare

$('rmv').on('click', function() { 
     alert('hello there!'); 
    }); 

a

$('#rmv').on('click', function() { 
     alert('hello there!'); 
    });