尝试在前置元素上添加点击事件：

Question

点击图片时尝试重定向到不同的页面

 $('.grid').prepend('<div id="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a href="#somelink"><img id="test" src="#somesource"></a></div>'); 

尝试了以下代码：

$('.grid').on('click', '#test', function() {
      alert("test"); //It didnt work.
});

Answer 1

可能是这样的：

$('.grid').on('click', window.location.href = 'page_url');

Answer 2

首先你必须使用 id 的类 insted ，（当多个元素的 id 相同时语义错误）

还可以在单​​击图像时重定向到您的页面， 首先防止点击网格时的默认动作，所以直接点击链接时不会重定向。

然后获取父标签图像的链接并使用 $(this).parent("a").attr("href"); 以编程方式执行重定向window.location.href

参见下面的 sn-p ：

$('.grid').prepend(
   '<div class="new" style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a href="https://stackoverflow.com"><img class="test" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShuHaRYzsoiz_KpVL5Ite65oK_ILy3p1b5vrZ996D1HFKdAS64"></a></div>');
    
$('.grid').on('click', '.test', function(e) {
  e.preventDefault();
  var urlRedirect = $(this).parent("a").attr("href");
  console.log("redirecting to ..."+ urlRedirect);
  // this will redirect after 2 sec
  setTimeout(function(){
    window.location.href = urlRedirect;
  },2000)
  
  
});

.test {
  width:20px;
  height:20px;
}

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

Answer 3

已编辑

我认为你只是创建了多个相同的 ID 元素。

使用 ID 更改为类，它应该可以正常工作。

已编辑

根据提问者的评论修改

$('.grid').each(function(event){
    if($(this).find('.test').length > 0) return false;
    var _html = '<div style="width:50px;background-color:#1879A9;padding-left:3px;margin-top:10px"><a class="link" href="'+$(this).data('url')+'"><img class="test" src="'+$(this).data('image')+'"></a></div>';
    var new_node = $(_html);
    $(this).prepend(new_node);
    new_node.find('.test').click(function(event){
        event.preventDefault();
        alert($(this).attr('src'));
        // redirect here
        // window.location.href = $(this).parent().attr('href');
    })
})

.grid{

width:40px;
height:40px;
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid" data-url="x.x.x" data-image="http://x.x.x"></div>
<br/>
<div class="grid" data-url="y.y.y" data-image="http://y.y.y"></div>
<br/>
<div class="grid" data-url="z.z.z" data-image="http://z.z.z"></div>
<br/>
<div class="grid" data-url="a.a.a" data-image="http://a.a.a"></div>