javascript - 警报来自 jquery post 的 ID

Question

我有 3 个从属选择列表，它们是从 mysql 填充的，然后我使用 jquery posts 通过更改事件填充其余的列表。一旦 3 个列表有了选择，它就会输出有关这三个列表的组合的数据，例如基于最后以该价格从该 vendor 购买的那些规范。我想用 id 回显编辑按钮，以便我可以使用该 id 构建表单，但是当我回显图片时，我无法使用 class 或 img 属性来提醒它。

PHP:

 echo "
    <div class='steel-edit-button'><img id='".$row['grade_id']."' src='pics/edit-paper.png' class='left-item-pic'></div>
    <div class='seller-base-info'>
        <div class='seller-info-header'><span class='dealer-title'>Supplier:</span><br>".$row['dealer']."</div>
        <div class='seller-price-contain'><span class='dealer-title'>Price:<br></span>".$row['price']." /<br>".$row['length']."</div>
        <div class='seller-date-contain'><span class='dealer-title'>Date:<br></span>".$row['date']."</div>
    </div>
    <div class='seller-comments'>Comments:<br><textarea class='seller-comments' disabled placeholder='".$row['comment']."'></textarea></div>

    ";

这是我回显的内容，然后这是脚本:

$(".left-item-pic").click(function() {
   alert($(this).attr('id'));
});

Answer 1

最有可能的情况是脚本在元素存在之前运行，因此 $(".left-item-pic")` 找不到它，并且事件处理程序永远不会附加。三个选项:

1. 将脚本放在 HTML 中的元素之后(通常建议放在结束 </body> 标记之前)

2. 使用 jQuery 的 ready function安排您的脚本在“DOM 就绪”上运行

3. 改用委托(delegate)处理程序:

   $(document).on("click", ".left-item-pic", function() {
       alert($(this).attr("id"));
   });
   

<小时/>

旁注:$(this).attr("id")可以简单地this.id ，该属性反射(reflect)为 DOM 元素上的属性。