Question

我无法触发我的事件处理程序。我正在将JSON调用到页面中，如下所示。然后，我希望能够单击我创建的一个按钮，该按钮将执行“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!');
    });
  });

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

你的选择器错了它应该是

$('#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
});

Answer 2

试试这个。将此代码移到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!');
        });
        });


    });

或者使用jQuery.on

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

Answer 3

首先，确保标识为rmv的元素不超过一个。 ID必须是唯一的，但您似乎正在添加多个食谱，每个食谱都有自己的“删除”按钮。

您的事件处理程序注册也遇到问题 - 在注册事件处理程序之前，您没有等待AJAX调用完成（然后添加表行）。

这可以通过在AJAX success回调中注册事件处理程序来解决，但考虑到您的ID的第一个问题，更好的解决方案是使用类（.rmv）而不是ID然后使用：

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

上述代码可以在success回调之外注册，因为它使用事件委派。它依赖于click事件冒泡到封闭表（已经存在），而不是在每个按钮创建时直接注册事件。

Answer 4

如果使用元素的id来触发任何调用，则Jquery函数需要附加'＃'符号。所以改变

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

到

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

Answer 5

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

将事件处理程序附加到ajax请求的success函数中。

修改 - 与其他人一样，您的选择器rmv错误，应为#rmv

Answer 6

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

jQuery On Click无效

6 个答案: