jQuery $(“.class”).click(); - 多個元素，在所有元素上觸發事件

Question

我正在開發一個 TODO 應用程序，我遇到了在具有相同類的所有元素上觸發的事件偵聽器的問題。

這是我到目前為止所擁有的：

• 在頁面加載時“添加新卡”btn，當用戶單擊動態生成的列表時，將附加到頁面。
• 該列表包含在<div> ，包含 input 和“Add” btn 以將列表項動態添加到列表中。

路障：

• 當用戶從動態生成的列表中單擊“添加”btn 時，它會將列表項添加到所有列表中。

我試過的：

• 我找到了僅在e.target上觸發“添加”btn 上的“ 'click'解決方案。 這在我的情況下不起作用，因為我沒有點擊需要添加的元素，我點擊了應該從輸入字段添加內容的按鈕。
• 我在配置“點擊”的功能中嘗試了這個，但沒有成功。

 e.stopPropagation();
 e.stopImmediatePropagation();

我在這里創建了一個代碼筆，您可以在其中運行現有代碼： https ://codepen.io/skarmen/pen/qBZYZJQ

我很感激這里的任何指導和幫助。

謝謝！

Answer 1

1 - 保存您單擊的按鈕add ：

const add=$(e.target);

2 - 將它傳遞到addTask函數中的邊輸入

 addTask(userInput, add)

3 - 現在使用該按鈕查找第一個列表。 所以 inf 父表單，然后緊跟在兄弟ol

$(add).parent().next("ol").append(

4 - 當您生成無法工作的taskCardContainer ，您正在生成相同的 id，使用類： id="to-do-list"和id="clear-btn"需要是： class="to-do-list"和class="clear-btn" , ids 需要是唯一的

 $(document).ready(function(event) { /* SUBMIT FUNCTION - listen to a click event on submit & prevent the default behaviour of the submit event - validate the userInput and add it to the list by calling (addTask f) */ function configureSubmitBehaviour() { $('.add-new-task-btn').on('click', function(e) { e.preventDefault() const add=$(e.target); const $eventTargetPreviousEl = $(e.target).prev() // e target = btn, so we are looking for the input field before the add task btn //console.log('e target:', e.target, 'this:', $(this)) //console.log('evenTargetPreviousEl:', $eventTargetPreviousEl) // store userInput in a variable let userInput = $($eventTargetPreviousEl).val().trim() //console.log('userInput:', userInput) // check if the input is valid if (userInput !== '') { addTask(userInput, add) } else { alert('Input cannot be empty. Please enter a valid task.') } }) } /* ADD NEW CARD FUNCTION */ function configureAddCardBehaviour() { $('#add-new-card-btn').on('click', function(e) { e.preventDefault() // append the task card container on btn click addCard() configureSubmitBehaviour() }) } function addCard() { let $taskCardContainer = $(` <div class="task-card-container"> <h2 class="editable"></h2> <!-- Input New Task --> <form> <label for="new-task" class="sr-only">New Task</label> <input class="new-task" type="text" placeholder="New Task" name="new-task"/> <button type="submit" class="btn add-new-task-btn">Add</button> </form> <!-- Task List --> <ol class="to-do-list" class="to-do-list sortable"> <!-- To do items added dynamically here --> </ol> <button class="clear-btn" class="btn clear-list-btn">Clear</button> </div> <!-- Task Board Container ENDS --> `) $('.main').append($taskCardContainer) //console.log('addList works') } /* ADD TASK FUNCTION - add the user input to the list - clear the input field - function is called upon submit */ function addTask(userInput, add) { let removeItem = '<button id="remove">x</button>' let checkbox = '<input type="checkbox">' // append the added element from the list $(add).parent().next("ol").append(`<li>${checkbox} <span data-id="editable-list-item">${userInput}</span> ${removeItem}</li>`); $('.new-task').val('') } configureAddCardBehaviour() })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jeditable.js/2.0.17/jquery.jeditable.min.js'></script> <!-- jQuery UI --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="wrapper"> <div class="main"> <h2>Goals List</h2> <p><em>App description and instructions go here</em></p> <button type="submit" id="add-new-card-btn" class="btn">Add New Task Card</button> </div> <!-- Main Container ENDS --> </div> <!-- Wrapper ENDS -->

編輯：

剛注意到。 你從一開始就做錯了，你在某處有一個循環。 所有這些函數相互調用，它們內部的點擊事件都搞砸了。

現在，當您有多張卡片時，將不是最后一個的項目添加到列表中時，它會在正確的位置添加一個列表，但也會循環所有下一個輸入並在為空時發出警報。 很確定這不是故意的。