Question

我有一个jQuery Javascript使用下面的块（2，.delegate）和（3，.ready + .click）来检测用户何时单击给定的复选框。但是，如果我使用块（1，.on，如jQuery＆gt; 1.7的建议），似乎事件没有绑定到给定的函数：

// Block #1: .on
$("#userCheck").on("keyup keypress paste mouseup", function(){
    alert("hello");
});

/* Blocks are commented since I would like to use .on jQuery function 
// Block #2: .delegate
$(document).delegate('#userCheck', 'click', function(){
    alert("hello");
});

// Block #3: .ready + .click
$(document).ready(function(){
    $( "#userCheck" ).click(function(){ alert("hello"); });
});
*/

HTML代码如下（仅与Django生成的相关部分）：

{% for r in requests_list %}    
    <tr>
        <td class='rr-e'>{{ r.username }}</td>
        <td class='rr-e'>{{ r.organization }} ({{ r.country }})</td>
        <td class='rr-e-select'>
            <input type='checkbox' id='userCheck' userid="{{ r.pk }}"/>
        </td>
    </tr>

    <tr><td class='row-separator' colspan='3'/></tr>

{% endfor %}

我正在使用Firefox和Web开发人员工具中的调试控制台，根据这些工具，一切似乎都没问题，但没有任何反应。

除此之外，以前的代码在以下示例中使用：http://jsfiddle.net/9r6kf/124/

Answer 1

您不应对多个元素使用相同的ID，因为它们应该是唯一标识符。在这种情况下，事件仅添加到您的ID的第一次出现。

您可以使用class属性，然后使用.userCheck选择您的元素。

<强> HTML

<input type='checkbox' class='userCheck' userid="{{ r.pk }}"/>

<强>的JavaScript

$('.userCheck').on('click keyup ...', function() {
    alert('hello');
});

此外，最佳做法是将事件委托给容器元素，而不是在使用循环时将它们添加到每个元素。 on方法允许您这样做。举个例子：

$('#your-table').on('click keyup ...', '.userCheck', function() {
    alert('hello');
});

jsfiddle的相关示例：http://jsfiddle.net/RuPzY/1/

Answer 2

正如@charlietfl所说，关键是用.ready（）函数包装.on（）函数，如下所示：

$(document).ready(function(){
    $("#userCheck").on("keyup keypress paste mouseup", function(){
        alert("hello");
    });
});

除此之外，但不是解决此问题的方法，必须更改复选框的ID，使其对所有复选框都是唯一的。但是，这不是问题的根源，因为列表中只有一个元素，因此，Django只生成了一个复选框。

但是，在http://jsfiddle.net/9r6kf/124/的示例中，它无需使用.ready（）函数包装该函数。为什么呢？

jQuery .on事件绑定

2 个答案: