使用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 () {