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標記即可，無需包含<>字符