表格新增行,子元素变化,下拉框监听不到值

文章介绍了两种方法来处理动态添加元素的事件监听问题。一是手动为新行添加事件监听器,二是利用事件委托,将监听器绑定到父级元素,通过事件冒泡来捕获新老元素的事件。提供了使用jQuery的事件委托示例代码,展示了如何监听以特定ID开头的<select>元素的点击事件。
摘要由CSDN通过智能技术生成

如果你通过新增 `<tr>` 行来动态添加元素,而 JavaScript 监听器无法监听到新增行的 ID 值,你可以使用以下方法:

1. 为新添加的行手动添加事件监听器:在每次新增行时,将点击事件监听器绑定到新行的 `<select>` 元素上。这样即使是新增的行,也能够被监听到。

2. 使用事件委托(Event Delegation):将点击事件监听器绑定到父级元素(例如表格的容器元素),然后通过事件冒泡捕获子元素的点击事件。这样无论是新行还是已存在的行,都能够被监听到。

下面是使用事件委托的示例代码:

$('#tableContainer').on('click', 'select[id^="field65942_"]', function() {
  var currentValue = $(this).val();
  console.log(currentValue);

上述代码中,`#tableContainer` 是包含表格的容器元素的选择器。我们将点击事件监听器绑定在该容器元素上,并使用第二个参数 `'select[id^="field65942_"]'` 指定了要捕获的子元素选择器,即以 "field65942_" 开头的 `<select>` 元素。

通过这种方式,不论是已存在的行还是通过新增添加的行,只要满足选择器条件,都会触发相应的点击事件,并打印出当前值。

请根据你的具体情况调整代码中的容器选择器和子元素选择器。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值