点击可点击div标签内的img标签事件无法正常工作

Question

我有一个可点击的<div>，我在其中使用jQuery添加<img>个标签。
所有<img>代码都具有相同的id 我想点击插入的图像并处理该元素的事件，但我得到了<div>的事件处理程序。
我在e.preventDefault()上尝试了e.stopImmediatePropagation()和<div>并添加了图片，但它无效。

使用Javascript：

$(document).ready(function () {
  $("#container").click(function (e) {
      debugger;
      e.preventDefault();
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;

      var img = $('<img>');
      img.css('top', y);
      img.css('left', x);
      img.attr('id', 'marking');

      var selectedItem = $('#markerItem').val();
      if (selectedItem == 'b') {
          img.attr('src', 'broken.png');
      }
      else if (selectedItem == 'd') {
          img.attr('src', 'damage.png');
      }
      else if (selectedItem == 's') {
          img.attr('src', 'scratch.png');
      }
      else if (selectedItem === null || selectedItem === undefined || selectedItem === "") {
          img.attr('src', 'damage.png');
      }
      img.appendTo('#container');
  }),

  $("#marking").click(function (e) {
      debugger;
      e.stopImmediatePropagation();
      $('img[id$="marking"]').remove();
  })
});

HTML：

<div id="container">
     <img src="" height="475" width="600" alt="Image preview..." id="img1">
</div>