将事件处理程序动态添加到选择框中

Dynamically adding event handler to select box

本文关键字：选择 添加 事件处理 程序 动态      更新时间：2023-09-26

我正在尝试将事件侦听器动态添加到选择框中。

有了这个代码，我没有得到任何响应，所以没有警报框：

var table = $('<table></table>');
var row = $('<tr><td></td></tr>').html('<select id="sel1"><option>test</option><option>test2</option></select>');
$("sel1").on('change', function() {
  alert(this.val());
});
table.append(row);
$('#mydiv').append(table);

此外，如何在td之间添加选择框？

目前，它添加在tr之间，td根本不存在。

这是一把小提琴

更新的Fiddle

当您处理动态添加的新DOM时，应该使用事件委派on（）：

$("#mydiv").on('change', '#sel1', function() {
   alert($(this).val());
});

注意：

  1. 您应该在sel1之前添加id选择器，它应该是#sel1
  2. .val()是一个jquery方法，您不能在像this.val()这样的javascript对象上调用它，它应该是$(this).val()

  3. 当前代码不会在td中添加select，而是直接在tr标签中添加，这样您就可以替换：

    var row = $('<tr><td></td></tr>').html('<select id="sel1"><option>test</option>
<option>test2</option></select>');

    签字人：

    var row = $('<tr></tr>').html('<td><select id="sel1"><option>test</option><option>
test2</option></select></td>');

希望这能有所帮助。

工作代码段

var table = $('<table></table>');
var row = $('<tr></tr>').html('<td><select id="sel1"><option>test</option><option>test2</option></select></td>');
$("#mydiv").on('change', '#sel1', function() {
  alert($(this).val());
});
table.append(row);
$('#mydiv').append(table);
td{
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>

在代码中需要注意的几点

1） 错误的选择器$("sel1")

代码中的问题是$("sel1")，您需要使用#通过id进行选择，因此它应该是$("#sel1")。所以你的代码会像

$("#sel1").on('change', function() {
 alert(this.val());
});

2）将HTML附加到DOM后绑定事件或使用事件委派您的代码应该按以下顺序放置工作Fiddle

var table = $('<table></table>');
var row = $('<tr><td></td></tr>').html('<select id="sel1"><option>test</option><option>test2</option></select>');    
table.append(row);
$('#mydiv').append(table);// now the element is added to DOM so bind event
$("#sel1").on('change', function() {
  alert($(this).val()); // note here I changes this.val() to $(this).val()
});

或者另一个选项是使用事件委派工作Fiddle

要将事件添加到动态元素，请使用事件委派

 $('body').on('change',"#sel1", function() {
  alert($(this).val());
});

3）要在td中放置选择标记，请使用以下语法

 var row = $('<tr></tr>').html('<td><select id="sel1"><option>test</option><option>test2</option></select></td>');

将td与select标签一起包裹，不要包裹在tr工作Fiddle

内

您需要在附加到页面后绑定更改事件：

var table = $('<table></table>');
var row = $('<tr><td></td></tr>').html('<select id="sel1"><option>test</option><option>test2</option></select>');  
table.append(row);
$('#mydiv').append(table);
$("#sel1").on('change', function() {
   alert(this.val());
});

而且您还忘记了"sel1"的#id选择器

您的代码中有三个主要问题

1.id选择器必须从# 开始

$("#sel1").on('change', function() {

2.您应该只在附加元素之后绑定更改侦听器，因为它在之前不存在于DOM中

3.使用

$('<tr><td></td></tr>')

您将获得对该行的jquery引用（<tr>元素）。然后用.html()替换行的内容（当然包括<td>）

相关文章：