Javascript 使用jquery在动态生成的表中获取单元格的值

下面的链接代码基本上是用json文件中的配方成分填充一个表。我想能够点击一个单独的成分，并显示在下面的div描述。尝试只针对td元素而不使用类尝试将它们包装在锚定标记中，并在创建每个单元格时单击每个单元格构建html

                if (data['drinks'][0]['strIngredient' + i] !== null) {
                    $("#recipe").append($('<tr>'))
                    $("#recipe").append($('<td class ="ingredient"></td>').html(data['drinks'][0]['strIngredient' + i]).val(data['drinks'][0]['strIngredient' + i]));
                    $("#recipe").append($('<td></td>').html(data['drinks'][0]['strMeasure' + i]));
                    $("#recipe").append($('</tr>'));
                    i++;
                } else iCheck = true;
            }

                 $(".ingredient").click(function () {
                      console.log('fired')
                  })


<div id="drinkDescription">
    <p id="name" name="name"></p>
    <br>
    <table id="recipe" name="recipe">

    </table>
    <br>
    <p id="description" name="description">

    </p>

</div>

if（数据['drinks'][0]['StringCredit'+i]！==null）{
$（“#配方”）。附加（$（''）
$（“#配方”）.append（$（''）.html（数据['drinks'][0]['strIngredient'+i]）.val（数据['drinks'][0]['strIngredient'+i]）；
$（“#配方”）.append（$（''）.html（数据['drinks'][0]['strMeasure'+i]）；
$（“#配方”）。追加（$（''）；
i++；
}else-iCheck=true；
}
$（“.component”）。单击（函数（）{
console.log（'fired'）
})

---

谢谢

您遇到的问题是，当您添加事件处理程序时，它会附加到此时可用的元素上

您要做的是使用事件委派，以便它将附加到将来的项目

$("#recipe").on("click",".ingredient",function () {

---

我们也能看到HTML代码吗。也许你可以创建一个片段？到目前为止你试过什么？有什么问题吗？单击事件未触发或正在触发，但不确定如何从单元格获取数据？这是否回答了您的问题？谢谢你，我做到了。