Динамически созданные кнопки JQUERY по умолчанию для последнего созданного элемента

Пытается создать динамические элементы JQUERY для добавления к HTML-странице. Хотелось бы нажать на событие, создать элементы из массива, а затем новые элементы перейти к различным функциям. До сих пор я получил:Динамически созданные кнопки JQUERY по умолчанию для последнего созданного элемента

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <head> 
     <title>Adding buttons dynamically to JQuery </title> 
     <link type = "text/css" rel="stylesheet" href="jquery-ui.css"> 
     <script type = "text/javascript" src="jquery.min.js"></script> 
     <script type = "text/javascript" src="jquery-ui.min.js"></script> 

    </head> 
    <body> 
     <p>Firing off without a hitch, HTML page loaded properly</p> 

     <button id="classChoice">Show Classes</button> 

     <div id='classSection' style="margin:50px">This is our new section test 
area</div>   

<script type="text/javascript">  
      //Classes Array 
      var classesArray = [ 'Spanish','English','French']; 
      var classIndex = 0; 

      //Button functionality 
      var btn = document.getElementById('classChoice'); 
      btn.addEventListener("click",click2Handler,false);   

      //Button handler 
      function click2Handler(){  

       alert('clicked button!'); /*Code to create variable for new button */ 

       evaluator(); 

       } 
       //Evaluator function 
       function evaluator() 
       { 
        if(classIndex<classesArray.length) 
        {//Only operate to the length of the classes array 
         for(var i = 0; i< classesArray.length;i++) 
         { 
         var whereCreated = jQuery('#classSection');//where to add 
         var id = 'btn' + classesArray[classIndex]; 
         whereCreated.append('<br><button id="' + id + '">' + classesArray[classIndex] + '</button>'); 
         jQuery('#'+id).button().click(function(){ 
          alert('Dynamically added button: '+ id + ' has been clicked...going to selector function');alert('id of button clicked: ' + id); 
          selector(id); 
         }); 
         console.log('whereCreated: '+whereCreated+". id: " +id); 
         classIndex++;       
         } 
         console.log('classIndex: ' + classIndex); 

        } 
       } 
       function selector(btnSelection) 
       { 
        switch(btnSelection) 
        { 
         case 'btnSpanish': 
         alert('Buenos Dias!'); break; 
         case 'btnEnglish': 
         alert('Howdy Partner!');break; 
         case 'btnFrench': 
         alert('Oui oui monsieur!');break; 
         default : alert('Unhandled exception inside selection'); 
         break; 

        } 
       } 



     </script> 
    </body> 
</html>

Проблема только последняя кнопка создана имеет свой идентификатор оценивается внутри функции селектора, в этом случае btnFrench. Как я могу получить каждую кнопку, чтобы передать правильный идентификатор?

источник

2015-06-19 Jeeves

Вы можете создать closure:

(function (id) { 
    jQuery('#' + id).button().click(function() { 
     alert('Dynamically added button: ' + id + ' has been clicked...going to selector function'); 
     alert('id of button clicked: ' + id); 
     selector(id); 
    }); 
})(id);

Замыкание определяет новую область. Это необходимо, потому что ваш обработчик не вызывается до тех пор, пока цикл не завершится, поэтому я не часть области в момент ее вызова или (в некоторых случаях) имеет последнее значение из цикла. (src)

источник

2015-06-19 11:46:13

Это сработало! Благодаря! – Jeeves

Динамически созданные кнопки JQUERY по умолчанию для последнего созданного элемента

ответ

Смежные вопросы