使用jQuery访问动态生成按钮，显示动态生成的内容

Question

我有一些按钮和内容动态从我的数据库。我需要能够按下一个按钮，并有它切换相关的<pre>的内容。

我能够让jQuery有点击事件与每个按钮，但它只显示最近创建的<pre>的内容。

我只是不知道如何让每个按钮与相关的<pre>标签交互。如有任何帮助，不胜感激。

echo "<div class='my-buttons'>";
for ($j = 0; $j < $num; ++$j)
{
$row = $result->fetch_array(MYSQLI_ASSOC);
echo "<button id=title>".$row['title']."</button>";
$code = base64_decode($row['code']);
echo "<pre style='display:none' id='code'>$code</pre>";        
}
echo "</div>

$('.my-buttons').on('click', (e) => $('#code').slideToggle('slow')))

Answer 1

这里有两个主要问题。首先，将id属性应用于PHP循环中创建的HTML元素。因此，你正在复制它们，这是无效的。DOM中只能有一个具有给定id的元素。将这些改为类。

然后在jQuery代码中，您需要使用DOM遍历来查找与单击按钮相关的pre元素，而不是一次针对所有pre元素。给定您的HTML结构，next()将为您完成:

$('.my-buttons').on('click', e => $(e.target).next('.code').slideToggle('slow'));

pre.code { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='my-buttons'>
<button class="title">title 1</button>
<pre class="code">Code 1... </pre>

<button class="title">title 2</button>
<pre class="code">Code 2... </pre>

<button class="title">title 3</button>
<pre class="code">Code 3... </pre>

<button class="title">title 4</button>
<pre class="code">Code 4... </pre>

<button class="title">title 5</button>
<pre class="code">Code 5... </pre>
</div>

还要注意使用外部CSS将display: none应用于pre元素。使用style属性的内联样式应该尽可能避免，因为它将HTML和CSS紧密地联系在一起。

Answer 2

如果你已经动态创建/更改了元素(在DOM加载之后)，你可以使用以下代码:

$(document).on('click','#exampleID',function(){
//do something
});