大量onclick元素..或者可能是一些jquery

Big amount of onclick elements...or perhaps some jquery

本文关键字：jquery onclick 元素 或者 大量      更新时间：2023-09-26

我正在构建一个应用程序，该应用程序在某个时刻会生成一个相当大的汇总表（20x~200）。一些细胞（可能是1000个），我可以在支持代码中识别，需要有某种onclick绑定。这些单元格的值需要解析为页面上的输入字段。

我研究了以下内容的内联呈现：onclick=genericfunctioncall（"copy_of_celldata"）不知怎么的，这对我来说还不够现代……：）

由于我在使用JQuery做其他事情，我想利用它。考虑类绑定和id绑定（必须使我呈现id和大量绑定）。绑定类是我喜欢的方式。但是，因为我动态地呈现表（Ajax在MVC4中调用一个局部视图并呈现.data），所以我必须使用.on（"click"，….）方法。我想不出一种方法来检测我点击了哪个TD来确定它的值，并将其解析为输入。

有人有主意吗？

为您想要分配点击事件的所有td提供一个公共类。

使用事件委派，因为您要为1000多个元素绑定相同的委派。

在事件中使用this上下文来获取触发事件的td。

$('table').on('click', '.tdClass', function() {
     // this refers to td which triggered the event
});

我对使用jQuery.data（）非常满意。您可以将任何想要的东西绑定到DOM元素。如果你有一个来自服务器的JSON响应，这里将是一个使用它的例子：

$.get('/url',function(resp){
   $.each(resp,function(k,v){
       // v is json object {"name":"item name","id": 22, "link": "http://www.google.com"}
       var item = $('<li />');
       item.html(v.name);
       item.data('item',v);  //attach your json object to dom element.
       $('ul').append(item);
   });
});
$('ul').on('click','li',function(){
      var data = $(this).data('item') // get your original object 
      alert(data.link) -->> "http://www.google.com"
      // do whatever you need to do.
});
相关文章：