Question

我想为页面上的每个文本字段创建一个keyup事件。我最终会有两个文本字段，都有不同的名称属性。（该示例只有一个文本字段。）每个文本字段将通过按下我指定给它的按钮来创建。问题：

我可以为每个文本字段创建一个keyup事件吗？
如果在创建文本字段之前调用keyup处理函数，是否会在新文本字段上触发keyup函数？
我想使用变量名来在我的函数txtField中分配keyup处理程序。这将为文本字段创建一个keyup事件处理程序，其name属性与my fieldName变量的值匹配。这可能吗？ $（'[name = fieldName]'）。keyup（myFunction）似乎不起作用。

有没有更好的方法来做我想做的事情？

// 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

是的，你可以（听起来像一个广告系列，我知道）你应该阅读Workbook.SaveAs method
不会，绑定事件到不存在的元素不会触发，除非您使用jquery的委托语法。再次parseInt(String s, int radix)
“txtField”函数没有任何问题，您可以通过多种方式使用jQuery来实现这一点，但没有理由这样做因为在这么简单的操作中不需要jQuery抽象。

“appendNewField” - 可以而且应该改进，这就是原因：

$（'[name =“appTxtField”]'），这很糟糕。这实际上是在寻找节点＆amp;在每次运行中构造该节点的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

＆＃13;

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);

＆＃13;

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

＆＃13;

或者如果你更喜欢：

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

<强> jsBin demo

为变量

2 个答案: