Question

我目前正在使用以下代码来绑定一个事件，该事件将输入限制为动态创建的一组文本框。

function createSomeTextBoxes() {
    //code here to add text boxes
    $('.PointerSPSLText').on('keyup', function() { charaterCount( $(this).attr('id'), 30 ) });
    $('.SPSLText').on('keyup', function() { charaterCount( $(this).attr('id'), 30 ) });
}

我遇到的问题是这些事件只与它找到的类的第一个元素绑定，因为每个元素可能不止一个，这是一个问题。我以前使用.live事件，我可以在加载DOM时声明一次，jquery负责其余部分。有没有办法模仿.live事件或者什么是实现我需要的结果的最佳方法？

Answer 1

对于动态创建的元素，我认为你必须使用如下事件委托：

$("body").on("keyup", ".PointerSPSLText", function() {
   charaterCount( $(this).attr('id'), 30 )
});
$("body").on("keyup", ".SPSLText", function() {
   charaterCount( $(this).attr('id'), 30 )
});

有关on()的更多信息：http://api.jquery.com/on/

Answer 2

是的，现在已弃用live，

您可以使用动态on这样的版本，

 $('#some_static_parent_that_holds_PointerSPSLText').on('keyup','.PointerSPSLText', function(){});

Answer 3

新版本的jQuery使用on事件而不是live将事件处理程序绑定到动态元素。

function createSomeTextBoxes() {
    //code here to add text boxes
    $(document).on('keyup', '.PointerSPSLText', function() { 
       charaterCount( $(this).attr('id'), 30 ) 
    });
    $(document).on('keyup','.SPSLText', function() { 
       charaterCount( $(this).attr('id'), 30 ) 
    });
}

请注意，事件处理程序绑定到文档而不是元素的选择器。选择器被指定为on函数的第二个参数。当一个事件被触发时，它会传播到document，然后检查target是否与作为第二个参数提供的选择器匹配。您可以绑定到静态父级而不是document，以获得更好的性能。

Answer 4

如果您只想限制字符长度，为什么不使用input / textarea元素的“maxlength”属性，前提是您可以访问生成动态元素的函数？

<input type="text" name="usrname" maxlength="30">
<textarea maxlength="30">Enter text here...</textarea>

.on jquery只处理第一个元素

4 个答案: