如何区分事件处理程序以处理复选框更改事件

I have got two parts of a HTML page .

我有一个HTML页面的两个部分。

One is Search and another is Table

一个是搜索,另一个是表

Inside table the ids for checkboxes will be generated dynamically such as 124 , 125 --- and the check box under search section is of id searchcheckboxid

在内部表中,复选框的ID将动态生成,如124,125 ---并且搜索部分下的复选框为id searchcheckboxid

Is it possible to distinguish the event handler when the checkbook is checked or Unchecked for both the sections ??

是否有可能在检查支票簿时区分事件处理程序或两个部分未选中?

Means if checkbox clicked inside the Table

表示在表格内单击复选框

i want to call this event handler

我想调用此事件处理程序

$(document).on('change','input[type="checkbox"]' ,function(){

alert('Clicked on Table Checkbox');    

});

and if its clicked searchcheckboxid under search section , i want to call a different handler .

如果它在搜索部分下点击了searchcheckboxid,我想调用另一个处理程序。

please let me know how to do this ??

请让我知道怎么做?

http://jsfiddle.net/vxe2d2hh/26/

2 个解决方案

#1

Change your selector to target only checkboxes which are descendants of table

将选择器更改为仅定位作为表后代的复选框

$(document).on('change','table input[type="checkbox"]' ,function(){
     alert('Clicked on Table Checkbox');            
});

Demo: Fiddle

---

If the table is static and rows are added dynamically then bind the delegated handler to the table instead of the document object. This will improve the performance since all change events outside of the table will be ignored by the handler

如果表是静态的并且动态添加行,则将委托的处理程序绑定到表而不是文档对象。这将提高性能,因为处理程序将忽略表外的所有更改事件

$('table').on('change', 'input[type="checkbox"]', function () {
    alert('Clicked on Table Checkbox');
});

Demo: Fiddle

#2

EDIT After seeing your code:

编辑看到你的代码后:

$('table').on('change', 'input[type="checkbox"]', function () {
    alert('Clicked on Table Checkbox');
});


$('#searchcheckboxid').on('change', function () {
    alert('Clicked on Search Checkbox');
});

Demo: http://jsfiddle.net/vxe2d2hh/28/