Jquery 在追加时动态添加onChange函数

我问自己一些jquery问题已经有一段时间了，因为我在谷歌搜索问题时失败了，这可能是因为缺少“行话”。它是关于在jquery中动态创建元素的。所以我可以这样做：

placeElement = $('<select/>');

placeElement.on('change', function () { do_sthg(); });

我可以用不同的方式来做，只是举例说明我的意思

我在不久前创建了一个函数，当用户单击编辑按钮时，它可以将用户的元素添加到页面中，到目前为止效果很好。但是当我后来编辑这个函数时，我偶然发现了这样一个事实：我创建了如下所示的元素，现在我想在创建元素的类型中添加一个onChange函数

$("#edit td."+value).append(
    $("<select/>", {
        'name': value,
        'id':'rankid_select'
    })
);

当我将它添加到元素时

$("<select/>", {
    'name': value,
    'id':'rankid_select',
    'onchange': function () {
        check_something_that_could_be_wrong();
     }
})

无论何时单击edit按钮，都会调用该函数，就像普通函数一样，但不会在更改select元素时调用该函数。基于此，我有3个问题：

如何在jquery中调用可以创建元素的不同样式？比如$'element'.html'.'.attr'.'.'等'.''.''.'。。。； 或者如上面所示，$，{'name'：值，'id'：'rankid_select'}。 如何在所示的创建元素类型中添加函数？ 从专业程序员的角度来看，上述解决方案之一是“错误”还是“肮脏”？

---

非常感谢你

我不会说你这样做都是错误的，做你觉得舒服的事。就个人而言，我更喜欢下面的语法，我希望它也能解决您的问题

var selectBox = $('<select/>')
                    .prop('name', value)
                    .prop('id', 'rankid_select' + $.guid++)
                    .on('change', function () {
                        check_something_that_could_be_wrong();
                });
$(container).append(selectBox);

---

使用GUID为控件分配唯一的编号，以保持控件的唯一性。如果您希望整个ID都相同，可以省略此项。

我想我理解您的问题，但如果我不太明白，我很抱歉

1使用jQuery可以执行的各种操作称为方法。括号内的部分称为选择器

jQuery的工作原理是将选择器传递给可以链接在一起的方法。此过程使选择器成为方法的参数$selector.method其他参数

$是jQuery方法的简写，因此即使是第一个选择器也是一个传入的参数，用于创建初始jQuery对象

该对象上的每个后续方法都返回一个值，该值传递给链中的下一个方法，直到最终值被放置在页面上

2$.onchange，函数{//在值更改时执行一些操作}

3现代web设计的最佳实践是将标记/内容HTML与交互功能JS或布局/外观CSS分离。从这个意义上讲，您的第一个示例是最正确的，因为它将事物分开

后面的示例导致内联JavaScript成为HTML标记的一部分。这是可行的，但通常被认为是过时且不灵活/难以维持的做法

首选方法是将事件侦听器附加到DOM中的对象，如图2所示

通过使用$selectedElement.on。。。您可以将JS保存在.JS文件中，这可以提高代码重用和易于维护等性能

---

与在HTML中的每个元素中都显示内联onClick函数不同，您可以使用1位JS实现相同的功能，但只需要在1个位置进行维护

听上去不错，有时候我完全不确定直接使用我刚读到的东西时使用的语法。我也更喜欢那个解决方案。也许就像我觉得写和读起来更舒服一样。我更喜欢上面的内容，正是因为它让它更具可读性。只要它易于阅读和调试，这就是一个很好的实践。当您缩小用于生产的脚本时，所有脚本都会被压缩，因此这对您和任何团队成员都有好处：