当前位置:  开发笔记 > 编程语言 > 正文

如何在动态生成的表行jquery中添加和操作id

如何解决《如何在动态生成的表行jquery中添加和操作id》经验,为你挑选了1个好方法。

我有一个问题,我怎么能为我的行添加一个标识符.我有这个代码使用json数据填充表体.

var table = '';
$.each(result, function (i, item) {
    table += '' + item.ip_address + '' + item.app_name + '' + item.crit_severity + '' + item.user_password + '';
});
$("#tableLinks tbody").html(table); 

我有这张桌子

我使用此代码进行测试,但它不起作用.这可能是什么错误?谢谢

$(".test").on('click', function() {
   alert('test');
});

Satpal.. 7

目前您正在使用的是一种"直接"绑定,它只会在您的代码进行事件绑定调用时附加到页面上存在的元素.

当动态生成元素或操作选择器(如删除和添加类)时,您需要使用.on()委托事件方法使用事件委派.

一般语法

$(staticParentSelector).on('event','selector',callback_function)

$("#tableLinks tbody").on('click', ".test", function(){
    alert('test');
});

document应该使用最近的静态容器代替你.

委派事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,我们可以使用委托事件将click事件绑定到动态创建的元素,并且还避免频繁附加和删除事件处理程序的需要.

$(function() {

  $("#tableLinks tbody").on('click', ".test", function() {
    snippet.log('test');
  });

 var result = [{
   ip_address : 123456,
   app_name:'test',
   crit_severity: 'crit_severity',
   user_password: 'user_password'
   }];
  var table = '';
  $.each(result, function(i, item) {
    table += '' + item.ip_address + '' + item.app_name + '' + item.crit_severity + '' + item.user_password + '';
  });
  $("#tableLinks tbody").html(table);
})






1> Satpal..:

目前您正在使用的是一种"直接"绑定,它只会在您的代码进行事件绑定调用时附加到页面上存在的元素.

当动态生成元素或操作选择器(如删除和添加类)时,您需要使用.on()委托事件方法使用事件委派.

一般语法

$(staticParentSelector).on('event','selector',callback_function)

$("#tableLinks tbody").on('click', ".test", function(){
    alert('test');
});

document应该使用最近的静态容器代替你.

委派事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,我们可以使用委托事件将click事件绑定到动态创建的元素,并且还避免频繁附加和删除事件处理程序的需要.

$(function() {

  $("#tableLinks tbody").on('click', ".test", function() {
    snippet.log('test');
  });

 var result = [{
   ip_address : 123456,
   app_name:'test',
   crit_severity: 'crit_severity',
   user_password: 'user_password'
   }];
  var table = '';
  $.each(result, function(i, item) {
    table += '' + item.ip_address + '' + item.app_name + '' + item.crit_severity + '' + item.user_password + '';
  });
  $("#tableLinks tbody").html(table);
})




推荐阅读
mobiledu2402851203
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有