jquery - 分配给变量的名称属性的按键事件处理程序

Question

我想为页面上的每个文本字段创建一个 keyup 事件。我最终将有两个文本字段，两者都有不同的名称属性。 (该示例只有一个文本字段。)每个文本字段都将通过按我分配给它的按钮来创建。问题:

1. 我可以为每个文本字段创建一个 keyup 事件吗？

2. 如果我在创建文本字段之前调用 keyup 处理函数，keyup 函数会在新文本字段上触发吗？

3. 我想使用变量名来分配函数 txtField 中的 keyup 处理程序。这将为文本字段创建一个 keyup 事件处理程序，其 name 属性与我的 fieldName 变量的值匹配。这可能吗？ $('[name=fieldName]').keyup(myFunction) 似乎不起作用。

4. 有更好的方法来完成我想做的事情吗？

   // creates a text field
   function txtField(fieldName, fieldVal){
       var objTxtField = document.createElement("input");
       objTxtField.type = "text";
       objTxtField.name = fieldName;
       objTxtField.value = fieldVal;
       return objTxtField;
   };
   
   // button fires this function
   // if there is no appended text field, create one and give it focus
   function appendNewField() {
       if ($('[name="appTxtField"]').length === 0) {
           var newTxtField = new txtField("appTxtField", "");
           $("#mainDiv").append(newTxtField);
       };
       $('[name="appTxtField"]').focus();
   };
   

Answer 1

1. 是的，你可以(我知道，听起来像是竞选路线)你应该阅读 direct-and-delegated-events

2. 不，将事件绑定(bind)到不存在的元素将不会触发，除非您使用 jquery 的委托(delegate)语法。再次direct-and-delegated-events

3. “txtField”函数没有任何问题，您可以通过多种方式使用 jQuery 来实现此目的，但没有理由这样做 因为在如此简单的操作中不需要 jQuery 抽象。

“appendNewField” - 可以而且应该改进，原因如下:

• $('[name="appTxtField"]') 每次调用函数时都会查找，这很糟糕。这实际上是在每次运行时寻找节点并构造该节点的 jquery 实例(“mainDiv”也是如此)

我要做的是在“appendNewField”外部范围中设置一个引用，并在每次调用时使用 jquery 的 find 方法。例如:

var mainDiv = $("#mainDiv");

function txtField( fieldName, fieldVal ) { ... };

function appendNewField() {
    if ( mainDiv.find( '[name="appTxtField"]' ).length === 0 ) {
        // utilize the chaining api and use focus directly after the appending.
        $( new txtField("appTxtField", "") ).appendTo( mainDiv ).focus();
    };
}