按键和按键不工作。

Question

我有一个网站与评论系统，当用户点击按钮，写一个评论，我附加了一个文本区域的文档，所以他写他的评论和保存它。我想在这个文本区域中添加一个字符计数器，但是当添加jQuery代码时，没有发生任何事情，它不会给我任何按键或按键的响应。我的代码是：

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

附加的文本区号：

$("#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 (因为我在后面附加了textarea)有关吗？

Answer 1

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

你可以这样做，就像：

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

这应该会有帮助：理解事件委托

Answer 2

您的代码无法工作，因为您的textarea已经动态地添加到DOM中，所以这个.comment_area文本区域的所有事件都不是available.In --在这种情况下，您需要使用事件委托将keyup事件附加到新添加的textarea中。

事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有子元素触发，无论这些子元素是现在存在的还是将来添加的。

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

Answer 3

如果元素不存在，则始终可以将事件注册到父元素，并在on()中使用选择器：

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

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