Question

我一直在问自己一些jquery问题，因为我没有因为缺乏“语言”而导致的问题。也许。它是关于动态地在jquery中创建元素的。所以我可以这样做：

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

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

我可以用不同的方式做到这一点，只是为了举例说明我的意思。

我刚刚创建了一个函数，当用户点击编辑按钮时，它会将页面添加到页面中，到目前为止工作正常。但是当我以后编辑这个函数时，我偶然发现了这样一个事实：我创建了如下所示的元素，现在想在这个＆＃34;类型的创建元素＆＃34;中添加一个onChange-Function。

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

当我将它添加到元素

时

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

只要单击编辑按钮，就会调用该函数，就像普通函数一样，但不会更改select元素。基于此，我有3个问题：

如何调用不同的样式我可以在jquery中创建元素？像$('#element').html('...').attr('...').etc('...')...;一样或如上所示$("<select/>", { 'name': value, 'id':'rankid_select' })。
如何在所示的创建元素类型中添加函数？
以上解决方案之一是“错误的”＃39;或者＆＃39;脏＆＃39;来自专业程序员的观点？

非常感谢你！

Answer 1

我想我理解你的问题，但如果我不太明白，我会道歉......

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

jQuery的工作原理是将“选择器”传递给可以链接在一起的“方法”。此过程使选择器成为方法的“参数”。 $("#selector").method("other argument");

“$”是jQuery（）方法的简写，所以即使第一个选择器也是传入的参数来创建初始jQuery对象。

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

2）$("<select/>").on("change", function(){ // do some stuff when the value changes});

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

您的后续示例会导致“内联”JavaScript成为HTML标记的一部分。这有效但通常被认为是过时的（并且不灵活/难以维护）实践。

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

通过使用$("#selectedElement").on(...)，您可以将JS保存在.js文件中，这可以改善代码重用和易维护性等功能。

在 HTML中的每个 <select/>元素中都没有内联的“onClick”函数，您可以使用1位JS来实现相同的功能，但只需要保持在一个地方。

Answer 2

我不会说你做的任何一种方式都是错的，做你觉得你觉得舒服的事情。就个人而言，我更喜欢下面的语法（我希望也能解决你的问题）。

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全面相同，则可以省略此项。

在追加时动态添加onChange函数

2 个答案: