Лучший способ установить обработчик для элемента флажка, который был создан с помощью jQuery

Question

У меня на сайте 5000 карточек. На каждой карточке есть флажок. Все карточки и флажок были созданы с помощью jQuery при загрузке веб-страницы.

'' '

  function createTitleAndToggleButtonInContainer(titleAndToggleContainer, coinData) {

    $("<h5></h5>", {
        "class": "card-title",
        text: coinData.id
    }).appendTo(titleAndToggleContainer);


    let toggleContainer = $("<div></div>", {
        "class": "switch"
    });

    let input = $("<input>", {
        "type": "checkbox",
        "name": "toggle",
    

    }).appendTo(toggleContainer);

' ''

Этот фрагмент кода называется 5000 раз. Я хочу добавить обработчик событий для флажка. Если пользователь отметит более 5 флажков - появится модальное окно с идентификаторами карточек. У меня будет глобальный счетчик, и каждый раз, когда флажок будет проверяться, счетчик ++.

Мне нужен способ узнать, какой флажок был установлен, потому что мне нужно знать идентификатор карт, с которых он пришел. Как лучше всего установить обработку событий с помощью jQuery для флажка, и самое главное, как иметь возможность узнать, какой флажок был выбран

Спасибо за помощников

Answer 1

var idCnt =0;
var coinData={id:'supercut'}
var titleAndToggleContainer = document.getElementById("titleAndToggleContainer");


function createTitleAndToggleButtonInContainer(titleAndToggleContainer, coinData) {    
    $("<h5></h5>", {
        "class": "card-title",
        "text": coinData.id +idCnt
    }).appendTo(titleAndToggleContainer);


    let toggleContainer = $("<div></div>", {
        "class": "switch"
    }).appendTo(titleAndToggleContainer);    

    let input = $("<input>", {
        "type": "checkbox",
        "name": "toggle",
        "onchange":"countChecks()",
    }).appendTo(toggleContainer);  
    
}
    
    
    
    for(let i=0;i<10;i++){
    idCnt++;
    
    createTitleAndToggleButtonInContainer(titleAndToggleContainer, coinData) ;
    }
    
    
    
    function countChecks(){
    var whichOnes=[];
    var cnt = 0;
    var checks = document.getElementsByName('toggle')
    for(let i = 0;i<checks.length;i++){
    
    
    
    
     if (checks[i].checked){
     
     whichOnes.push(cnt);
     }
     
     cnt++;
     
     
     
    }
    if(whichOnes.length>=5)alert('down the rabbit hole');
    console.log(whichOnes)
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='titleAndToggleContainer'></div>

Answer 2

Попробуйте следующее:

$("input[type=checkbox]").each(function() {
  if($(this).is(':checked')) {
    console.log($(this).attr("name"));
  }
});