Question

我有这个jQuery，只有在文档准备就绪时才有效：

$( ".product_imgfiles a" ).click(function(event) {
    var img_file = $( this ).children( "img" ).attr( "src" );
});

但是，当我需要在附加元素上应用该事件时，我需要将我的代码更改为：

$(document).on("click", ".product_imgfiles a", function() {
    var img_file = $( this ).children( "img" ).attr( "src" );
});

并且它有效..但img_file变量不存在。我相信因为$(this)在我的第二段代码中不再适用。在这种情况下如何选择获取src属性？

谢谢。

Answer 1

img是所点击锚点的先前兄弟

  $(document).on("click", ".product_imgfiles a", function(e) {
    e.preventDefault();
    var img_file = $(this).prev("img").attr("src");
    alert(img_file)
  });

$(document).ready(function() {
  $('#product_imgfiles_container').on("click", ".product_imgfiles a", function(e) {
    e.preventDefault();
    var img_file = $(this).prev("img").attr("src");
    alert(img_file)
  });

  $("#product_imgfiles_container").append("<div class='col-xs-4 col-md-2'><div class='thumbnail product_imgfiles'><img src='+val+'><a href=''>delete</a></div></div>");
  $("#product_imgfiles_container").append("<div class='col-xs-4 col-md-2'><div class='thumbnail product_imgfiles'><img src='+val+'><a href=''>delete</a></div></div>");
  $("#product_imgfiles_container").append("<div class='col-xs-4 col-md-2'><div class='thumbnail product_imgfiles'><img src='+val+'><a href=''>delete</a></div></div>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product_imgfiles_container">
</div>

$（this）在onClick事件中不再有效

1 个答案: