没有事件在加载的 svg 路径上工作，尽管它在之前加载的 svg 上工作

Question

我正在尝试在加载的 svg 元素上的路径上使用 click 事件。但它不适用于加载的 svg。但是，如果 svg 未加载，它可以正常工作。

这段代码完美运行。

<div class="mapdiv">
  <?php       
      echo file_get_contents('a.svg'); 
  ?> 
</div>

$(document).ready(function () {
    $("path").click(function () {

        alert("clicked");
    });

});

但是当尝试使用 jquery 加载 svg 时，它不起作用。谁能解释为什么会发生这种情况？

$(document).ready(function () {

$("#addImage").click(function () {
    $("#fileinput").click();
});

$("#fileinput").change(function () {
    if (this.files && this.files[0]) {
        let reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }
});

function imageIsLoaded(e) {
    $(".mapdiv").load(e.target.result);
}


$("path").click(function () {
    alert("clicked");
    });
})

Answer 1

要确保内容已附加到 DOM，您需要等待 .load()。您可以将其作为回调函数来执行。请阅读此处： .load() | jQuery API 文档。或者使用 .live()。

$(document).ready(function() {
  $("#addImage").click(function() {
    $("#fileinput").click();
  });

  $("#fileinput").change(function() {
    if (this.files && this.files[0]) {
      let reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);
    }
  });
});

function imageIsLoaded(e) {
  $(".mapdiv").load(e.target.result, function() {
    $("path").click(function() {
      alert("clicked");
    });
  });
});