Создание прослушивателей событий для отдельных DIVS, которые еще не были созданы, и как запускать отдельную команду?

Question

Я пытаюсь создать интерактивные divs, которые будут устанавливать переменную после их нажатия.

Например,

Если моя программа должна была делать с игрой с шарами.

Когда пользователь вводит имя и какой мяч они хотят (скажем, имя = Джонни и Бал = BasketBall), а затем нажимает «Создать мяч», моя программа создаст div, называемый «Ball0». Дисплей «Ball0» отобразит имя Джонни. Когда пользователь щелкает на его имя он будет говорить «Джонни баскетболом.

Вот как я пытаюсь сделать этот код

var ballRefrence = -1; 

function createBall() { 
    ballRefrence +=1; 
    var myElement = document.createElement('div'); 
    myElement.id = 'individualBall'+ballRefrence; 
    ballArea.appendChild(myElement);//ball area is where I want to list the divs 
    myElement.style.width = "550px"; 
    myElement.innerHTML= userName+" has bought a ball!"; 

    createEventListner(); 
} 


function createEventListner() { 
    var iBall = document.getElementById("individualBall"+ballRefrence); 
    iball.addEventListener("click",showBall,false); 
} 


function playCaption() { 
    //I am not sure how to pull the individual up here. 
    //Since I am using the "BallRefrence"variable 
    //it will always be the last person clicked.. 
    //(Basically I cannot say 
    //alert.(ballRefrence); 
} 

Я предполагаю, что я пытаюсь сказать это, я есть мой «BallRefrence», который каждый раз увеличивается на 1. Я храню все элементы в массиве (так что первый человек пойдет на индекс 0, второй пойдет на индекс 1 ... ect) У меня возникают проблемы с переопределением элемент, потому что я не уверен, как вытащить искомое число из div.

Пример: После 3 щелчков «создать шар» мой html будет выглядеть примерно так.

<div id = "individualBall0></div> 
    <div id = "individualBall1></div> 
    <div id = "individualBall2></div> 

Поскольку каждый отдельный DIV будет совпадать с элементом в массиве Я хочу, Как сказать мою программу «При нажатии кнопки individualBall0, я хочу мяч [0] ..» или «, когда вы нажмите indivdualBall2, мне нужен мяч [2] "

Надеюсь, это имеет смысл.

Answer 1

Одно из решений, которое не соответствует вашим обновленным требованиям (но я считаю, что-то проще) находится на JSFiddle. Это сохраняет имя пользователя и тип шара в локальном закрытии, связанном с прослушивателем событий, для этого DIV. Код достаточно прост, и он удаляет некоторые помехи из глобального пространства имен, выявляя только createBall:

var createBall = (function() { 
    var ballReference = -1; 
    var ballArea = document.getElementById('ballArea'); 
    var showBall = function(userName, ballType) { 
     return function(event) { 
      alert(userName + ' has a ' + ballType);  
     }; 
    }; 
    return function() { 
     ++ballReference; 
     var userName = document.getElementById('name').value; 
     var ballType = document.getElementById('ball').value; 
     var myElement = document.createElement('div'); 
     myElement.id = 'individualBall'+ballReference; 
     ballArea.appendChild(myElement); 
     myElement.innerHTML= userName+" has bought a ball!"; 
     myElement.addEventListener("click",showBall(userName, ballType),false); 
    }; 
}()); 

---

Чтобы выполнить обновленные требования, оно должно быть довольно легко. Ваш обработчик события будет выполняться в контексте вашего элемента, так что-то вроде этого:

this.id.substring('individualBall'.length) //=> '0', '1', etc 

должен возвращать строку, представляющую индекс дел. Вы можете использовать это непосредственно для индексирования различных массивов, или, если это делает вас брезгливым, превратите его в целое число с parseInt, конструктором Number или унарным оператором +.

Но обратите внимание, что предложения от Bergi, jfriend00 и RobG - все хорошо. Есть много хороших способов обойти это.