javascript - 动态 不与 jquery 一起运行

Question

我想为照片制作一个网站。

在使用 jquery 函数 (.append) 创建的动态 div 中有这个 anchor :

<a href='#' style='color:green;' id='"+this.foto_id+"' data-id='"+this.foto_id+"' class='modificaDataFoto modificaDataFoto"+this.foto_id+"'>Modifica</a>

页面正常加载，如果我使用浏览器调试器，我会看到所有 HTML 代码，包括来自数据库的所有动态数据...

但是如果我尝试在 jquery 函数中设置 anchor 类，它不会运行:

$('.modificaDataFoto').bind('click', function(event) {
    event.preventDefault();
    var idFotoModifica= $(this).attr("data-id");
    console.log(idFotoModifica);
    $("dataFoto"+idFotoModifica).focus();
    $("dataFoto"+idFotoModifica).css("color", "red");
    $(this).attr("class", "modificaDataFotoConferma");
});

为什么那个功能不起作用？

Answer 1

.bind()仅适用于已存在于 DOM 中的元素。您可能试图在动态元素存在之前将点击事件绑定(bind)到该元素。

有两种方法可以解决这个问题:

• 等到<a>之后在运行 $('.modificaDataFoto').bind() 之前，元素已附加到文档中, 或
• 从非动态元素(或文档本身)委托(delegate)点击事件:

$(document).on('click', '.modificaDataFoto', function() {
  // this is essentially the same as your existing function; I've
  // consolidated it a bit and removed the no-longer-needed preventDefault.
  $("dataFoto" + $(this).attr("data-id")).css("color", "red").focus();
  $(this).attr("class", "modificaDataFotoConferma");
}