相同按鈕類上的click事件，但在jquery中調用不同的操作

Question

我有一個問題。 我在這里定義了代碼：

 $('.js-cars-item [type="checkbox"]').change(function() { var idx = $(this).closest('li').index(); //Get the index - Number in order var chk = $(this).is(":checked"); //Get if checked or not var obj = this; //Checkbox object $('.js-cars-item').each(function() { //Loop every js-cars-item //Find the checkbox with the same index of clicked checkbox. Change disabled property $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false); }); var checkeds = []; $(".cars-item input:checkbox:checked").each(function(index) { checkeds[index] = $(this).attr('id'); }); console.clear(); console.log("These are checked:", checkeds); }) $('.js-add-category').click(function() { var categoryContent = `<div class="cars"> <div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-3"> <label for="car-1-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-3"> <label for="car-2-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-3"> <label for="car-3-3"><i class="icon-tick"></i></label> </li> </ul> </div> <button type="button" class="js-add-section">Add Section</button> </div> <br>` $('.main').append(categoryContent); }); $(document.body).on('click', 'button.js-add-section', function() { var sectionContent = `<div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-6> <label for="car-1-6"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-6> <label for="car-2-6"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-6> <label for="car-3-6"><i class="icon-tick"></i></label> </li> </ul> </div>` $('.cars').append(sectionContent); }); 

 .cars-item { border-bottom: 1px solid gray; } ul { /* Added to fully show console in snippet */ margin: 2px; } li { display: inline; } .cars { box-sizing: content-box; width: 250px; height: auto; padding: 10px; border: 5px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="js-add-category">Add Category</button> <br> <br> <div class="main"> <div class="cars"> <div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-3"> <label for="car-1-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-3"> <label for="car-2-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-3"> <label for="car-3-3"><i class="icon-tick"></i></label> </li> </ul> </div> <button type="button" class="js-add-section">Add Section</button> <br> <div class="section"> </div> </div> <br> 

我面臨的問題是，當我單擊框中的“ Add Section按鈕時，它會在其他框中添加重復的行。 我要實現的是僅在我單擊“添加部分”按鈕的框中添加一行復選框。

當我單擊“ Add Category ，它將生成另一個帶有“ Add Section按鈕的框

請演示代碼以獲得概述。 請有人幫助我，我完全被困住了。

謝謝。

Answer 1

$(".cars")引用所有 .cars元素。 您只需要包含您單擊的按鈕的按鈕。 那將是$(this).closest(".cars")

要使驗證代碼在新添加的部分上起作用，您需要使用事件委托，就像對.js-add-section單擊處理程序所做的一樣。

 $(".main").on('change', '.js-cars-item [type="checkbox"]', function() { var idx = $(this).closest('li').index(); //Get the index - Number in order var chk = $(this).is(":checked"); //Get if checked or not var obj = this; //Checkbox object $(this).closest('.cars').find('.js-cars-item').each(function() { //Loop every js-cars-item //Find the checkbox with the same index of clicked checkbox. Change disabled property $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false); }); var checkeds = []; $(this).closest(".cars").find(".cars-item input:checkbox:checked").each(function(index) { checkeds[index] = $(this).attr('id'); }); console.clear(); console.log("These are checked:", checkeds); }) $('.js-add-category').click(function() { var categoryContent = `<div class="cars"> <div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-3"> <label for="car-1-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-3"> <label for="car-2-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-3"> <label for="car-3-3"><i class="icon-tick"></i></label> </li> </ul> </div> <button type="button" class="js-add-section">Add Section</button> </div> <br>` $('.main').append(categoryContent); }); $(document.body).on('click', 'button.js-add-section', function() { var sectionContent = `<div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-6> <label for="car-1-6"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-6> <label for="car-2-6"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-6> <label for="car-3-6"><i class="icon-tick"></i></label> </li> </ul> </div>` $(this).closest('.cars').append(sectionContent); }); 

 .cars-item { border-bottom: 1px solid gray; } ul { /* Added to fully show console in snippet */ margin: 2px; } li { display: inline; } .cars { box-sizing: content-box; width: 250px; height: auto; padding: 10px; border: 5px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="js-add-category">Add Category</button> <br> <br> <div class="main"> <div class="cars"> <div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-3"> <label for="car-1-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-3"> <label for="car-2-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-3"> <label for="car-3-3"><i class="icon-tick"></i></label> </li> </ul> </div> <button type="button" class="js-add-section">Add Section</button> <br> <div class="section"> </div> </div> <br> 

Answer 2

只需使用$(this).parent().append(sectionContent); 而不是$('.cars').append(sectionContent);

工作代碼

 $('.js-cars-item [type="checkbox"]').change(function() { var idx = $(this).closest('li').index(); //Get the index - Number in order var chk = $(this).is(":checked"); //Get if checked or not var obj = this; //Checkbox object $('.js-cars-item').each(function() { //Loop every js-cars-item //Find the checkbox with the same index of clicked checkbox. Change disabled property $(this).find('li:eq(' + idx + ') [type="checkbox"]').not(obj).prop("checked", false); }); var checkeds = []; $(".cars-item input:checkbox:checked").each(function(index) { checkeds[index] = $(this).attr('id'); }); console.clear(); console.log("These are checked:", checkeds); }) $('.js-add-category').click(function() { var categoryContent = `<div class="cars"> <div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-3"> <label for="car-1-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-3"> <label for="car-2-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-3"> <label for="car-3-3"><i class="icon-tick"></i></label> </li> </ul> </div> <button type="button" class="js-add-section">Add Section</button> </div> <br>` $('.main').append(categoryContent); }); $(document.body).on('click', 'button.js-add-section', function() { var sectionContent = `<div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-6> <label for="car-1-6"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-6> <label for="car-2-6"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-6> <label for="car-3-6"><i class="icon-tick"></i></label> </li> </ul> </div>` $(this).parent().append(sectionContent); }); 

 .cars-item { border-bottom: 1px solid gray; } ul { /* Added to fully show console in snippet */ margin: 2px; } li { display: inline; } .cars { box-sizing: content-box; width: 250px; height: auto; padding: 10px; border: 5px solid blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="js-add-category">Add Category</button> <br> <br> <div class="main"> <div class="cars"> <div class="cars-item js-cars-item"> <ul> <li> <input type="checkbox" id="car-1-3"> <label for="car-1-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-2-3"> <label for="car-2-3"><i class="icon-tick"></i></label> </li> <li> <input type="checkbox" id="car-3-3"> <label for="car-3-3"><i class="icon-tick"></i></label> </li> </ul> </div> <button type="button" class="js-add-section">Add Section</button> <br> <div class="section"> </div> </div> <br>