Форум

pifon · #1 (**permalink**) 16.10.2014, 22:09

Всем привет! Прошу помощи в следующей задаче:

Есть такой код:

$('#id1').html('<img src="img1.png" /><img src="img2.png" />');

Разумно, что 2 картинки добавляются в блок с id="id1"

Хочу, чтобы при нажатии на одну из этих картинок срабатывала функция. например:

$('#id1 img').click(function(){
		$(this).addClass('activeimg');
	});

Однако такое решение не срабатывает. Как я подозреваю, из-за того, что эти картинки подгружены яваскриптом, а не в хтмл прописаны.

Какое есть решение, чтобы выполнялась задача?

Заранее спасибо за помощь))

danik.js · #2 (**permalink**) 16.10.2014, 22:36

Сообщение от pifon

Как я подозреваю, из-за того, что эти картинки подгружены яваскриптом

Нет. Картинка, вставленная в DOM из исходника абсолютно ничем не отличается от вставленной скриптом.

Видимо ты не в том порядке разместил свой код. Сначала вставил картинку, затем навесил обработчик. Так у тебя?

danik.js · #3 (**permalink**) 16.10.2014, 22:38

Можно так:

var $img1 = $('<img src="img1.png" />', {click: function() {
    $(this).addClass('activeimg');
});
var $img2 = $('<img src="img2.png" />');
$('#id1').empty().append($img1).append($img2);

рони · #4 (**permalink**) 16.10.2014, 22:44

pifon,
вам либо нужен on
либо всё должно работать и так

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .activeimg  {
     border: rgba(255, 51, 0, 1) 2px dotted;

  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      $('#id1').html('<img src="http://javascript.ru/forum/images/smilies/write.gif" /><img src="http://javascript.ru/forum/images/smilies/cray.gif" />');
      $('#id1 img').click(function(){
        $(this).addClass('activeimg');
    });
});
  </script>
</head>

<body>
<div id='id1'></div>


</body>

</html>

pifon · #5 (**permalink**) 16.10.2014, 22:46

Сообщение от danik.js

Нет. Картинка, вставленная в DOM из исходника абсолютно ничем не отличается от вставленной скриптом.

Видимо ты не в том порядке разместил свой код. Сначала вставил картинку, затем навесил обработчик. Так у тебя?

всё верно. сперва вставляется картинка, затем обработчик.

pifon · #6 (**permalink**) 16.10.2014, 22:54

Сообщение от рони

pifon,
вам либо нужен on
либо всё должно работать и так

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .activeimg  {
     border: rgba(255, 51, 0, 1) 2px dotted;

  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      $('#id1').html('<img src="http://javascript.ru/forum/images/smilies/write.gif" /><img src="http://javascript.ru/forum/images/smilies/cray.gif" />');
      $('#id1 img').click(function(){
        $(this).addClass('activeimg');
    });
});
  </script>
</head>

<body>
<div id='id1'></div>


</body>

</html>

Странно, что у меня не работает. Код по-сути идентичный...
Буду выяснять, в чем беда, спасибо!

Форум

Справочник

Discord чат

Курсы javascript