Javascript 带有动态div的JQuery对话框

我正在构建一个web应用程序，其中一个页面中有6个动态生成的div，每个div包含一个隐藏的子div和一个按钮，我希望当用户单击给定div的按钮时，会出现一个对话框，其中该div的子div作为内容

这里有一个JS Fiddle上的MCVE（运行代码片段查看实际代码）来帮助您理解（我的代码非常大，出于隐私原因，我无法共享它，因此我重新创建了我面临的问题）：

---

我已更新了您的小提琴，以提供答案。我已为每个按钮指定了一个唯一的ID值和每个关联的div类名，从按钮的ID值开始

更改的HTML

These are 4 divs generated via python templates by the server .
<div class = "movie">
<p>
This a movie 1
</p>
  <button id = "showMovieInfo1">
  Show dialog
  </button>
  <div class = "showMovieInfo1-info hidden">
    <p>
     Some Info here
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 2
</p>
  <button id = "showMovieInfo2">
  Show dialog
  </button>
  <div class = "showMovieInfo2-info hidden">
    <p>
     Some Info here 2
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 3
</p>
  <button id = "showMovieInfo3">
  Show dialog
  </button>
  <div class = "showMovieInfo3-info hidden">
    <p>
     Some Info here 3
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 4
</p>
  <button id = "showMovieInfo4">
  Show dialog
  </button>
  <div class = "showMovieInfo4-info hidden">
    <p>
     Some Info here 4
    </p>
  </div>
</div>

---

我已经更新了你的提琴以提供答案。我给每个按钮一个唯一的ID值和每个关联的div类名，从按钮的ID值开始

更改的HTML

These are 4 divs generated via python templates by the server .
<div class = "movie">
<p>
This a movie 1
</p>
  <button id = "showMovieInfo1">
  Show dialog
  </button>
  <div class = "showMovieInfo1-info hidden">
    <p>
     Some Info here
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 2
</p>
  <button id = "showMovieInfo2">
  Show dialog
  </button>
  <div class = "showMovieInfo2-info hidden">
    <p>
     Some Info here 2
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 3
</p>
  <button id = "showMovieInfo3">
  Show dialog
  </button>
  <div class = "showMovieInfo3-info hidden">
    <p>
     Some Info here 3
    </p>
  </div>
</div>

<div class = "movie">
<p>
This a movie 4
</p>
  <button id = "showMovieInfo4">
  Show dialog
  </button>
  <div class = "showMovieInfo4-info hidden">
    <p>
     Some Info here 4
    </p>
  </div>
</div>

---

第一个问题。所有按钮的ID都相同

button id = "showMovieInfo2"

第二，你对对话有问题。您需要为每个对话框设置ID才能工作

这是一个完整的例子

---

希望这有帮助。

第一个问题。所有按钮的ID都相同

button id = "showMovieInfo2"

第二，你对对话有问题。您需要为每个对话框设置ID才能工作

这是一个完整的例子

---

希望这有帮助。

您需要稍微更改HTML，为按钮提供一个类而不是ID。ID必须是唯一的。您的原始代码仅在第一个按钮上设置click listener

因此，假设您已经更改了按钮以使类showMovieInfo，下面是完整的工作代码，它将执行您想要的操作

基本上，我通过按下按钮获得div的HTML，然后打开一个对话框，将其作为内容。$dlg变量用于存储对“打开”对话框的引用，以便您可以关闭它

var$dlg=未定义；
$（函数（）{
$（“.showMovieInfo”）。单击（函数（）{
var html=$（this.parent（）.find（“.movie info”）.get（0.outerHTML）；
如果（$dlg）{
$dlg.dialog（“关闭”）；
}
$dlg=$（html.dialog（）；
})
} );
。隐藏{
显示：无；
}

这是服务器通过python模板生成的4个div。

这是一部电影

显示对话框

这里有一些信息


这是一部电影2

显示对话框

这里有一些信息2


这是一部电影3

显示对话框

这里有一些信息3


这是一部电影

显示对话框

这里有一些信息

您需要稍微更改HTML，为按钮提供一个类而不是ID。ID必须是唯一的。您的原始代码仅在第一个按钮上设置click listener

因此，假设您已经更改了按钮以使类showMovieInfo，下面是完整的工作代码，它将执行您想要的操作

基本上，我通过按下按钮获得div的HTML，然后打开一个对话框，将其作为内容。$dlg变量用于存储对“打开”对话框的引用，以便您可以关闭它


var$dlg=未定义；
$（函数（）{
$（“.showMovieInfo”）。单击（函数（）{
var html=$（this.parent（）.find（“.movie info”）.get（0.outerHTML）；
如果（$dlg）{
$dlg.dialog（“关闭”）；
}
$dlg=$（html.dialog（）；
})
} );
。隐藏{
显示：无；
}

这是服务器通过python模板生成的4个div。

这是一部电影

显示对话框

这里有一些信息


这是一部电影2

显示对话框

这里有一些信息2


这是一部电影3

显示对话框

这里有一些信息3


这是一部电影

显示对话框

这里有一些信息

试试这个。这显示了如何动态地创建
元素
并动态地使用这些元素
。见下面的工作经验



我的孩子
{
宽度：300px；
高度：200px；
边框：2件纯黑；
背景颜色：灰色；
颜色：白色；
字体系列：monospace；
利润率：50像素；
位置：相对位置；
}
.但是{
位置：绝对位置；
底部：0；
}
希德姆先生{
宽度：100%；
高度：150像素；
背景色：红色；
颜色：白色；
文本对齐：居中；
字体大小：40px；
字体系列：Helvetica；
位置：相对位置；
右：0；
边框：2倍纯白；
盒影：2px 3px 2px白色；
}
$（文档）.ready（函数（）{
对于（var i=0；i请尝试此操作。此操作演示了如何动态创建
元素
，以及如何动态使用这些元素
见下面的工作经验



我的孩子
{
宽度：300px；
高度：200px；
边框：2件纯黑；
背景颜色：灰色；
颜色：白色；
字体系列：monospace；
利润率：50像素；
位置：相对位置；
}
.但是{
位置：绝对位置；
底部：0；
}
希德姆先生{
宽度：100%；
高度：150像素；
背景色：红色；
颜色：白色；
文本对齐：居中；
字体大小：40px；
字体系列：Helvetica；
位置：相对位置；
右：0；
边框：2倍纯白；
盒影：2px 3px 2px白色；
}
$（文档）.ready（函数（）{
对于（var i=0；我已经更新了你的需求。检查你是否需要此功能。我已经更新了你的需求。检查你是否需要此功能。谢谢，这正是我想要的！@Anis Souames我接受Mykola Borysuk的答案，但我先给出了答案：）很酷。很乐意帮忙。谢谢，这正是我想要的！@Anis Souames我接受Mykola Borysuk的回答，但我先给出了一个答案：）很酷。很乐意帮忙。所有答案都有效，你的答案也有效，但语法没有其他答案那么清晰，谁先回答不重要，是的