从动态创建的锚点中获取href

Question

我无法获得锚点的href链接。我在jquery中以循环方式动态创建元素。请帮我解释如何获取链接地址。

function setGrid(){
//  get List of all Avatars...
    var arr = ['MMA','MMB','MMC','MMD','MME','MMF','MMG','MWA','MWB','MWC','MWD','MWE','MWF','MWG'];
    for(var i=0;i<arr.length;i++)
    {                                                                     
        var d = "<a  class='testClick' href='../../images/avatars/"+arr[i]+".png'>"+                                   
        "<img  src='../../images/avatars/"+
        arr[i]+".png' id='"+arr[i]+"' alt='avatar' style='height:120px;width:120px; margin-left:10px'></a>";
        $( "div.modal-body" ).append( d );
    }
}

以下是我试图通过onclick监听器访问链接的方法：

$(document).ready(function(){   
    $(".testClick").click(function () {
        var value = $(this).attr('href');
        alert(value );
    });
});`

我无法得到href。请帮帮我。

Answer 1

您的上述代码工作正常;它正确地警告了href属性。

您唯一缺少的是阻止点击实际带您进入该链接。这可以通过将e传递到.click()的.testClick函数，然后调用e.preventDefault()来防止默认点击行为来完成：

function setGrid() {
  //  get List of all Avatars...
  var arr = ['MMA', 'MMB', 'MMC', 'MMD', 'MME', 'MMF', 'MMG', 'MWA', 'MWB', 'MWC', 'MWD', 'MWE', 'MWF', 'MWG'];
  for (var i = 0; i < arr.length; i++) {
    var d = "<a class='testClick' href='../../images/avatars/" + arr[i] + ".png'>" +
      "<img  src='../../images/avatars/" +
      arr[i] + ".png' id='" + arr[i] + "' alt='avatar' style='height:120px;width:120px; margin-left:10px'></a>";
    $("body").append(d);
  }
}

setGrid();

$(document).ready(function() {
  $(".testClick").click(function(e) {
    e.preventDefault();
    var value = $(this).attr('href');
    alert(value);
  });
});

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