jQuery on.click问题

Question

我有两个代码示例，第一个示例工作正常，第二个示例工作不正常。 当我单击#incrementBtn时，它们两个都应增加一个计数器。

以下是示例（我将提供所有代码以供进一步说明）：

1

$('body').on('click','#incrementBtn', function(){
  let textAreaValue = parseInt($('textarea').val());
  $('textarea').val(textAreaValue+1)
});

2

$('#incrementBtn').on('click', function(){
  let textAreaValue = parseInt($('textarea').val()); 
  $('textarea').val(textAreaValue+1)
});

还有一个问题，使用此代码有什么区别（代码不起作用）：

let textArea = $(<'textarea'>);      

let textAreaValue = parseInt(textArea.val());
textArea.val(textAreaValue+1);

这（代码有效）：

let textAreaValue = parseInt($('textarea').val());
$('textarea').val(textAreaValue+1)

这是完整的工作代码： https : //jsfiddle.net/wjnjdk72/3/

Answer 1

首要问题：

您将onclick处理程序应用于元素之前，已将其动态插入到DOM中。 主体处理程序之所以起作用，是因为它正在侦听来自与该#incrementBtn选择器匹配的元素中的body元素上的点击事件（事件会冒泡）（稍后是否将其添加到页面中无关紧要）。

您可以通过交换顺序来查看此操作，如果您首先添加该元素，则它可以工作：

incrementCounter('#wrapper'); // add the element first

$('#incrementBtn').on('click', function(){
  let textAreaValue = parseInt($('textarea').val()); 
  $('textarea').val(textAreaValue+1)
});

第二期：

此语法无效的Javascript： $(<'textarea'>); 您已经在其中添加了一些随机<>。

Answer 2

使用jQuery时，您仅选择名称为“ textarea”的HTML标记即可，无需包含<>字符