Javascript 如何关联X个元素的点击功能？_Javascript_Jquery_Html_Css

Javascript 如何关联X个元素的点击功能？

javascript jquery html css

Javascript 如何关联X个元素的点击功能？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如果我有一个包含数百行的表，我可以为每一行和每个组件分配一个id（因为该表是动态创建的）。但是，如果例如，在每一行中，我都有一个复选框，并且我想将每个复选框与同一行中另一列中单击以执行某项操作的函数相关联，我该如何做？是否必须为每个复选框定义onclick方法？如何访问同一行的另一列更新：我试过这个建议，但不起作用。样本： <html> <head> <meta http-equiv="Content-Type" content="text/html

如果我有一个包含数百行的表，我可以为每一行和每个组件分配一个id（因为该表是动态创建的）。
但是，如果例如，在每一行中，我都有一个复选框，并且我想将每个复选框与同一行中另一列中单击以执行某项操作的函数相关联，我该如何做？
是否必须为每个复选框定义onclick方法？如何访问同一行的另一列

更新：
我试过这个建议，但不起作用。样本：

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>  
<body>  

<table id="main_table" border="1">  
<tr><th>First</th><th>Last</th><th>Modify</th></tr>  
<tr>  
    <td>Jim</td><td><input id="rep1" type="text" disabled value="X"></td><td><input   class=".checkbox" type="checkbox">  </td>  
</tr>  
</table>  
</body>  
<script type="text/javascript">  

$(document).delegate('change', "#main_table :checkbox", function(){    
    console.log("In function");  
    if(this.checked){ //If you want to perform checked check  

        alert("Hello");    
    }  
});   


</script>  

</html>

更新3:
以下方法也有效：

$("#main_table ").on('click', ":checkbox", function(){  
    console.log("In function");  
    if(this.checked){ //If you want to perform checked check  

        alert(parentTd);   
    }  
});

似乎

委托

不起作用？有人能解释一下我搞砸了什么吗？

你需要活动授权。将

单击

事件附加到页面上存在的父级，例如table元素：

$('#myTable').on('change', 'input[type="checkbox"]', function (e) {
     ... run some code here ...
});

然后让复选框事件冒泡到该父级

对于jquery1.7+：

您需要使用。您必须使用委托事件方法

你可以试试类似的东西

$(document).on('change', "#tableId :checkbox", function(){  
    if(this.checked){ //If you want to perform checked check
        var parentTd = $(this).closest('td');
        var siblingTd = parentTd.siblings()
    }
});

也检查和

编辑根据注释

uncaughttypeerror:Object#没有方法“on”

似乎您正在使用就你而言

$(document).delegate("#tableId :checkbox", 'change', function() {
      //You code
});

你会用。例如：

$("#myTable").on("click", ":checkbox", function() { ... });

单击处理程序将仅附加到一个元素（表），但将响应对嵌套在其中的所有复选框（以及仅复选框）的单击

在事件处理程序中，

此

将绑定到已单击的复选框，因此您可以从

$（此）

开始并遍历DOM以查找任何其他感兴趣的元素。

您可以为所有元素指定一个处理程序。在处理程序中，

$（this）

是单击以触发处理程序的元素，然后您可以使用DOM遍历方法查找与其相关的其他元素，例如

$("#yourtable").on("click", ".checkbox", function() {
    $(this).closest("tr").find(".destination").text("Clicked on checkbox in this row");
});

本例假设每行中有一个带有

class=“checkbox”

的复选框，另一个字段带有

class=“destination”

更新：使用您的HTML：

$("#main_table").on("click", ".checkbox", function () {
    alert($(this).closest("tr").find("input[type=text]").val());
});

@MohammadAdil:我被卡在了表格上。我在谷歌上搜索发现，我可以使用id和onclick方法进行关联，但我不明白这怎么会发生在数百个元素（每行1个）上。你的

委托的参数顺序错误。它是委托（选择器、事件、处理程序）
。您拥有的参数的顺序与on
使用的顺序相同。@Jim，对于委托事件，您不需要$（文档）。准备好了吗是$（文档）。on
？我得到未捕获类型错误：对象#没有方法“on”
@Jim，似乎您正在使用委托（）
我已经更新了答案，我还得到了未捕获的类型错误：对象#没有方法“on”
.on（）
自jQuery 1.7以来一直可用。我无法解释为什么会出现此错误，因为您使用的是1.7。请确保所有这些代码都在$（document）.ready（）处理程序中。虽然我不认为这与您的错误有关。我将CDN改为1.7。但现在它根本不起任何作用。（虽然我没有得到错误）它应该是class=“checkbox”
，而不是class=“.checkbox”。
$("#yourtable").on("click", ".checkbox", function() {
    $(this).closest("tr").find(".destination").text("Clicked on checkbox in this row");
});

$("#main_table").on("click", ".checkbox", function () {
    alert($(this).closest("tr").find("input[type=text]").val());
});