指定给变量的名称属性的上键事件处理程序

Question

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

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

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

3. 我想使用一个变量名来分配我的函数txtField中的keyup处理程序。这将为具有name属性的文本字段创建一个keyup事件处理程序，该属性与我的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. 是的，你可以(听起来像一个竞选路线，我知道)你应该阅读直接和委托事件

2. 不，绑定事件到不存在的元素不会触发，除非你使用jquery的委托语法。再次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();
    };
}

Answer 2

var $mainDiv = $("#mainDiv");
// creates a text field
function txtField(name, val){
  return $("<input />", { // Return a new input El
    name: name,           // Assign Properties
    value: val,
    keyup: function(){    // And JS events
      alert("key up! Yey");
    }
  });
}
// 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 $newField = txtField("appTxtField", ""); // Create it
    $mainDiv.append( $newField );                // Append it
    $newField.focus();                           // Focus it
  }
}
$("button").on("click", appendNewField);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add field</button>
<div id="mainDiv"></div>

如果你喜欢的话:

function appendNewField() {
  if ($('[name="appTxtField"]').length > 0) return; // Exists already! Exit fn.
  txtField("appTxtField", "").appendTo( $mainDiv ).focus();
}

jsBin演示