[解決済み] jQuery On Clickが動作しない

質問

イベントハンドラを起動させるのに苦労しています。以下のように、ページにJSONを呼び出しています。そして、私が作成したボタンの1つをクリックして、「hello there」アラートを実行できるようにしたいのです。ページ上の他のすべての要素では動作しますが <button> .

どなたか助けてください。

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!');
    });
  });

レシピ.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 %}

解決方法は？

セレクタを間違えています。

$('#rmv')

で、動的に要素を追加する場合は、次のように使用します。

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

ajax成功時のコールバックのループは、おそらく重複したidを持つ要素を生成してしまうので、@Alnitakが言ったように、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>');
  });
});

で、セレクタは次のようになります。

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