javascript - 可以动态分配 bPopup 触发器和目标 div 吗？

Question

我们通过循环查询并添加当前行，在 ColdFusion 页面(internshiphandleX、internshipHiddenX 等)中动态构建了一个配对 div 列表，例如:

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

我们想要绑定(bind)在一起作为模态窗口和相应的触发器。使用此代码:

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 链接到 last internshipHidden。我错过了什么？有没有更好的方法从动态创建的 css 隐藏 div 中制作模式窗口(也就是说，在骨架框架内？我真的不想重新开始使用 bs。)

DreamWeaver 不喜欢我把函数放在循环中，但所有酷 child 都告诉我不要听它。

编辑:用 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) {
    	$("#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 的行。取消注释，删除警报，一切顺利。