Jquery 如何使用eventData和命名函数附加事件处理程序？

我有一个页面，其中包含ID为“rec-0”、“rec-1”到“rec-n”的元素，我正试图找出如何将事件附加到这些元素上。它们是作为td元素的子元素的输入元素

<td><input type="checkbox" id="rec-0" /></td>

但是在

recipe\u复选框中单击（）

函数，我得到

uncaughttypeerror:Object没有方法“prop”

。这是“配方”复选框单击的功能：

function recipe_checkbox_clicked(elem) { 
    if (elem.prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
}

如果我将函数的代码复制到一个匿名函数中，只需稍加修改，它就可以正常工作。以下是修改后的代码：

$("td > input").change( function() { 
    if ($(this).prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
}); 

我可以按原样离开，但我不喜欢使用匿名函数。有没有一种方法可以不用它们就完成我正在尝试的事情

---

在Adil和Felix的帮助和建议下，我通过以下代码实现了我想要的行为

function recipe_checkbox_clicked() { 
    if ($(this).prop('checked')) $("#modify-recipe").show(); 

    var any_checked = false; 
    $("td > input").each(function() { 
        if($(this).prop('checked')) {
            any_checked = true; 
            return false; 
        }
    }); 
    if (!any_checked) $("#modify-recipe").hide(); 
}

以及附加此功能的选择器：

$("td > input").change(recipe_checkbox_clicked);

function recipe_checkbox_clicked() { 
    if ($(this).prop('checked')) $("#modify-recipe").show(); 
    //  ^^^^^^^
    // or better: if (this.checked) ...
    else $("#modify-recipe").hide(); 
}

---

非常感谢你！我花了好几个小时想弄明白怎么做

您可以传递change中函数的名称，而不是传递匿名函数，您可以在函数中从$（this）访问jquery中的事件源，而从javascript中的$访问事件源

改变

$("td > input").change( function() { 
    if (elem.prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
}); 

至

$("td > input").change(yourFunction); 

function yourFunction() { 
    elem = $(this);
    if (elem.prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
}

要绑定rec-0、rec-1、rec-2等ID，可以使用通配符

---

您可以在change中传递函数名，而不是传递匿名函数，您可以在函数中从$（this）访问jquery的事件源，而从javascript的$访问事件源

改变

$("td > input").change( function() { 
    if (elem.prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
}); 

至

$("td > input").change(yourFunction); 

function yourFunction() { 
    elem = $(this);
    if (elem.prop('checked')) $("#modify-recipe").show(); 
    else $("#modify-recipe").hide(); 
}

要绑定rec-0、rec-1、rec-2等ID，可以使用通配符

---

只需在命名函数中使用相同的代码：

$("td > input").change(recipe_checkbox_clicked);

function recipe_checkbox_clicked() { 
    if ($(this).prop('checked')) $("#modify-recipe").show(); 
    //  ^^^^^^^
    // or better: if (this.checked) ...
    else $("#modify-recipe").hide(); 
}

---

我认为您的代码有两个问题：

$（“td>输入”）。更改（{elem:this}，单击配方复选框）

即使您可以正确访问
elem
，我假设这里的
this
实际上并不是指由
$（“td>input”）
选择的任何元素，而是指其他元素，因此
$（elem）.prop（…）
可能无法按预期工作

函数配方\u复选框\u单击（元素）{

传递给事件处理程序的第一个参数始终是事件对象。如果要访问事件数据，必须通过事件对象执行此操作：

function recipe_checkbox_clicked(event) {
  var elem = event.data.elem;
}

只需在命名函数中使用相同的代码：

$("td > input").change(recipe_checkbox_clicked);

function recipe_checkbox_clicked() { 
    if ($(this).prop('checked')) $("#modify-recipe").show(); 
    //  ^^^^^^^
    // or better: if (this.checked) ...
    else $("#modify-recipe").hide(); 
}


我认为您的代码有两个问题：

$（“td>input”）.change（{elem:this}，recipe_复选框_单击）；

即使您可以正确访问
elem
，我假设这里的
this
实际上并不是指由
$（“td>input”）
选择的任何元素，而是指其他元素，因此
$（elem）.prop（…）
可能无法按预期工作

函数配方\u复选框\u单击（元素）{

传递给事件处理程序的第一个参数始终是事件对象。如果要访问事件数据，必须通过事件对象执行此操作：

function recipe_checkbox_clicked(event) {
  var elem = event.data.elem;
}

这里的
elem是什么？它来自哪里？谢谢@Felix Kling，错过了现在更新的答案，elem=$（这个）；这里的
elem是什么？它来自哪里？谢谢@Felix Kling，错过了现在更新的答案，elem=$（这个）；