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

Question

下面的链接代码基本上是我用 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>

Answer 1

您遇到的问题是，当您添加事件处理程序时，它会附加到当时可用的元素。您想要做的是使用事件委托，以便它将附加到未来的项目。$("#recipe").on("click",".ingredient",function&nbsp;()&nbsp;{