Форум

Snova_s_vami · #1 (**permalink**) 21.03.2018, 15:59

Добрый вечер, помогите со следующей проблемой.

var testCount = 0;
setInterval(function(){
    $('.сontainer').append('<button class = "btn">'+testCount+' кнопка</button>');
    $('.btn').eq(testCount).click(function(){
        console.log(testCount);   
    });
    testCount++;
},1000);

Почему новые события назначаются на весь класс, я же указываю, что применять их необходимо только на определенный номер. То есть, я могу нажать на любую кнопку из созданных и она выведет текущий номер итерации, а не тот, который в неё заложен изначально.
Я так понимаю, что из-за того, что событие при нажатии берет новое значение переменной. Если так, то как правильно это реализовать?

рони · #2 (**permalink**) 21.03.2018, 16:04

Snova_s_vami,
сделайте функцию для строк 3 и 4

Snova_s_vami · #3 (**permalink**) 21.03.2018, 16:08

Собственно... и всё, помогло. Спасибо

рони · #4 (**permalink**) 21.03.2018, 16:11

Snova_s_vami,

Пример ошибочного использования

рони · #5 (**permalink**) 21.03.2018, 16:14

Snova_s_vami,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
var testCount = 0;
setInterval(function(){
    (function(testCount) {
    $('<button class = "btn">'+testCount+' кнопка</button>').appendTo('.сontainer')
    .click(function(){
        console.log(testCount);
    });
    })( testCount++)
},1000);

});
  </script>
</head>

<body>
<div  class="сontainer"></div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript