Можно назначить триггер bPopup и целевые divs динамически?

Question

У нас есть список спаренных дивы динамически построенных в ColdFusion странице (internshipHandleX, internshipHiddenX и т.д.), обернув по запросу и добавление текущей строки, например:

<div id="internshipHidden#internship.currentrow#" class="hidden pop-up"> 

, что мы хотим связать вместе модальные окна и соответствующие триггеры. Используя этот код:

for (var row = 1; row <= totalInternships; row ++){ 
    var thisHandle = "#internshipHandle" + row; 
    var thisHidden = "#internshipHidden" + row; 
    $(thisHandle).click(function(e){ 
     e.preventDefault(); 
     $(thisHidden).bPopup({modalColor:"black"}); 
    }); 
} 

Мы по-видимому, связать все из internshipHandle (ов) к последней internshipHidden. Что мне не хватает? Есть ли лучший способ сделать модальные окна из динамически созданных css-скрытых divs (то есть в каркасе скелета? Я ДЕЙСТВИТЕЛЬНО не хочу начинать с использования bs.)

DreamWeaver не рад, что я помещаю функции в циклах, но все классные дети говорят мне не слушать его.

Редактировать: попробовал то же самое с диалоговом окне jqueryUI и имел те же проблемы. Мне понравилось бы объяснение. Благодаря!

Answer 1

Добро пожаловать в Javascript. Вы просто столкнулись с закрытием в своей естественной среде обитания.

Для того, чтобы переменная row работала так, как вы ожидаете, вам необходимо передать ее в свой объем. Это можно сделать, используя закрытие. You may want to dig deeper into that topic, но сейчас, вот исправление для вашей проблемы:

var totalInternships = 2; 
 

 
for (var row = 1; row <= totalInternships; row++){ 
 
    var bindInternship = function(rowIndex) { 
 
    \t $("#internshipHandle" + rowIndex).click(function(e){ 
 
      e.preventDefault(); 
 
      alert('pop-up #' + rowIndex); 
 
      //$("#internshipHidden" + rowIndex).bPopup({modalColor:"black"}); 
 
     }); 
 
    }; 
 
    bindInternship(row); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button type="button" id="internshipHandle1">pop-up 1</button> 
 
<div id="internshipHidden1" class="hidden pop-up"> 
 

 
<button type="button" id="internshipHandle2">pop-up 2</button> 
 
<div id="internshipHidden2" class="hidden pop-up">

Примечание: Я заметил линию для bPopup. Раскомментируйте это, удалите предупреждение, и вам хорошо идти.