尽管它适用于先前加载的 svg，但没有事件在加载的 svg 路径上运行

Question

我正在尝试在加载的 svg 元素的路径上使用点击事件。但它不适用于加载的 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 Documentation. OR use the .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");
    });
  });
});

尽管它适用于先前加载的 svg，但没有事件在加载的 svg 路径上运行

No event is working on loaded svg path though it works on svg previously loaded

jquery

events

svg

onload