Попытка добавить событие клика на элементе prepend:

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

Сначала вы должны использовать класс insted для id (семантически ошибка, когда один и тот же идентификатор для нескольких элементов)

также для перенаправления на вашу страницу при нажатии на изображение, сначала запретите действие по умолчанию при нажатии наgrid, поэтому он не будет перенаправлять при нажатии на ссылку напрямую.

, затем получить ссылку на изображение родительского тега и программно перенаправить, используя $ (this) .parent ("a"). attr ("href");window.location.href

См. Фрагмент ниже:

$('.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

Отредактировано

Я думаю, вы просто создаете несколько одинаковых элементов идентификатора.

Измените с помощью идентификатора на класс, он должен работать нормально.

Отредактировано

Модифицировано по комментарию Аскера

$('.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>