зацикливание через div и присвоение им идентификатора, а затем делает их кликабельными

Question

Я пытаюсь сделать несколько div внутри моего цикла отображать свое собственное уникальное сообщение, когда они нажимаются. Но я не могу заставить код работать. то, что я пытаюсь сделать, это ... div1 = привет, я div1, div2 = привет, я div2.

Div отображаются на странице так, как должны, но я не могу заставить сообщение клика работать. Заранее спасибо за любую помощь или совет :)

<script type="text/javascript">
  var idcontainer = "";
  var divs = "";
  var clickcontent;
  for (i = 1; i < 5; i++) {
    divs += `<div class="divs" id="div${i}">Test${i}</div>`;
    clickcontent += "Hello i am div" + i;
    idcontainer += "#div" + i;
  }
  console.log(idcontainer);

  $("#output").html(divs);
  $(idcontainer).click(function(e) {
    e.preventDefault();
    alert(clickcontent);
  });
</script>

Answer 1

Для этого вам не нужен идентификатор, просто сохраните содержимое в данных attr и покажите в клике, как показано ниже

var idcontainer = '';
var divs = '';
var clickcontent
for(i=1;i < 5;i++){

  clickcontent = 'Hello i am div' + i;
  divs += `<div class="divs" id="div${i}" data-content="`+clickcontent+`">Test${i}</div>`;
  
idcontainer += '#div' + i;
}
   // console.log(divs)
$("#output").html(divs);

$('.divs').click(function (e) { 
  
  alert($(this).data('content'));
});

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

Answer 2

Вы можете использовать следующий код для динамического генерирования div и добавления к любому тегу, который вы хотите, здесь я добавил к тегу body.

// Creating Divs and assign class by the name of "dynamicDiv"

for(i=1;i < 5;i++){
    let div = document.createElement('div');
    div.textContent = `I am div ${i}`;
    div.className = 'dynamicDiv';
    $("body").append(div);
}

// Attaching click event for each generated div by using class name
$('.dynamicDiv').on('click', function () {

    alert($(this).text()); // Displaying the text of div

});

Answer 3

Чтобы выбрать много div, вам нужно разделить их идентификаторы запятыми;теперь idcontainer выглядит следующим образом - #div1#div2..., поэтому jquery не выдаст ни одного элемента (посмотрите this , чтобы узнать почему). Если бы вы хранили их идентификаторы в массиве, например:

var idcontainer = [];
var divs = '';
var clickcontent
for(i=1;i < 5;i++){

  clickcontent = 'Hello i am div' + i;
  divs += `<div class="divs" id="div${i}" data-content="`+clickcontent+`">Test${i}</div>`;

idcontainer.push('#div' + i);
}

, а затем используйте jquery так:

$(idcontainer.join(', ')).click(function (e) { 
  e.preventDefault();
  alert(clickcontent)
});

Это будет работать.