Question

我有一个带评论系统的网站，当用户点击按钮写评论时我会在文档中附加一个textarea，所以他写下他的评论并保存。我想为这个textarea添加一个charachters计数器但是当添加jQuery代码时没有发生任何事情，它让我对任何keyup或keypress都没有响应。我的代码是：

$(document).ready(function(){   
        var limitnum = 120; // set your int limit for max number of characters
    $('.comment_area').keyup(function(){alert('test');
      limits($(this), limitnum);
    });
});

附加的textarea代码：

$("#section_bar").after('<p id="counter"><span>0</span> characters</p><textarea rows="4" cols="50"  id="" class="comment_area" name="reply_area" ></textarea><a class="comment button small black" href="#!" id="reply_'+match_id+'"><span>save comment</span></a>');

我想知道为什么keyup或keypress oes不起作用是因为我在创建和加载DOM时没有textarea这一事实（因为我之后附加了它）？

Answer 1

您的代码无效，因为您的textarea已动态添加到DOM，因此此.comment_area textarea的所有事件都不可用。在这种情况下，您需要使用 event delegation 将keyup个事件附加到新添加的textarea：

事件委托允许我们将单个事件监听器附加到父元素，将为匹配选择器的所有子项触发，这些孩子现在是否存在，或将来是否存在。

$('#section_bar').on('keyup','.comment_area',function() {
    alert('test');
    limits($(this), limitnum);
});

Answer 2

您需要使用事件委派，因为您不能以这种方式将事件处理程序附加到最初呈现DOM时不存在的元素。

你可以这样做：

$('#section_bar').on('keyup','.comment_area',function() {
  // Code here
});

这应该有所帮助：Understanding Event Delegation

Answer 3

如果元素尚未存在，您始终可以将事件注册到父元素并使用on（）中的选择器：

$('body').on('keyup', '.comment_area', function () {
// ...
});

现在事件被body元素捕获，但只有当事件目标与给定的选择器匹配时才会调用您的函数。

keyup和keypress不起作用

3 个答案: