jQuery On Click 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16022744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery On Click not working
提问by puffin
I'm having trouble getting my event handler to fire. I'm calling JSON into the page as below. I then want to be able to click one of the buttons I have created which will execute the 'hello there' alert. It works with every other element on the page, but not the <button>.
我无法触发我的事件处理程序。我将 JSON 调用到页面中，如下所示。然后我希望能够单击我创建的按钮之一，该按钮将执行“hello there”警报。它适用于页面上的所有其他元素，但不适用于<button>.
Can anyone help?
任何人都可以帮忙吗？
test.js
测试.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
食谱.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 %}
回答by JIA
you have got the selector wrong it should be
你把选择器弄错了，应该是
$('#rmv')
and if you are appending the element dynamically you should use it like
如果您要动态附加元素，则应该像这样使用它
$(document).on('click','#rmv',function(e) {
//handler code here
});
your loop in the ajax success call back will probably produce elements with duplicate ids, which is wrong, so as @Alnitak mentioned you can switch to class selector like after modifying the cde
您在 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>');
});
});
and the selector will look like
选择器看起来像
$(document).on('click','.rmv',function(e) {
//handler code here
});
回答by Anoop
Try this. Move this code inside callback
尝试这个。把这段代码移到里面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!');
});
});
});
OR use jQuery.on
或使用 jQuery.on
$(document).on("click", "#rmv",function() {
alert('hello there!');
});
回答by Alnitak
First, make sure there's not more than one element with ID rmv. ID's have to be unique, but you appear to be adding multiple recipes, each with their own "remove" button.
首先，确保 ID 的元素不超过一个rmv。ID 必须是唯一的，但您似乎要添加多个食谱，每个食谱都有自己的“删除”按钮。
You also have problems with your event handler registration - you're not waiting for the AJAX call to finish (and then add the table row) before registering the event handler.
您的事件处理程序注册也有问题 - 在注册事件处理程序之前，您没有等待 AJAX 调用完成（然后添加表行）。
This can be resolved by registering the event handler within the AJAX successcallback, but given the first problem with your ID, a better solution would be to use a class (.rmv) instead of an ID and then use:
这可以通过在 AJAXsuccess回调中注册事件处理程序来解决，但考虑到您的 ID 的第一个问题，更好的解决方案是使用类 ( .rmv) 而不是 ID，然后使用：
$('#recipes').on('click', '.rmv', function() {
var $tr = $(this).closest('tr');
// do something with the current row
});
The above code can be registered outside of the successcallback because it uses event delegation. It relies on the clickevent bubbling up to the enclosing table (which already exists), instead of directly registering the event on each button as they're created.
上面的代码可以在success回调之外注册，因为它使用了事件委托。它依赖于click事件冒泡到封闭表（已经存在），而不是在创建每个按钮时直接在每个按钮上注册事件。
回答by chandresh_cool
Jquery function requires a '#' symbol to be appended if you are using id of an element to trigger any call. So Change
如果您使用元素的 id 来触发任何调用，则 Jquery 函数需要附加一个“#”符号。所以改变
$('rmv').on('click', function() {
alert('hello there!');
});
to
到
$('#rmv').on('click', function() {
alert('hello there!');
});
回答by Chris Till
$('#rmv', table).on('click', function(){
alert('hello there!');
});
回答by Brad M
$.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!');
});
});
Attach the event handler in the success function of your ajax request.
在 ajax 请求的成功函数中附加事件处理程序。
Edit - As per others, your selector rmvis wrong, should be #rmv
编辑 - 与其他人一样，您的选择器rmv是错误的，应该是#rmv
