Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не работает простой код на jQuery (https://javascript.ru/forum/misc/50920-ne-rabotaet-prostojj-kod-na-jquery.html)

pifon 16.10.2014 22:09

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

Есть такой код:
$('#id1').html('<img src="img1.png" /><img src="img2.png" />');


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

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

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


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

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

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

danik.js 16.10.2014 22:36

Цитата:

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

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

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

danik.js 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);

рони 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 16.10.2014 22:46

Цитата:

Сообщение от danik.js (Сообщение 336124)
Нет. Картинка, вставленная в DOM из исходника абсолютно ничем не отличается от вставленной скриптом.

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

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

pifon 16.10.2014 22:54

Цитата:

Сообщение от рони (Сообщение 336127)
:-? 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>

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


Часовой пояс GMT +3, время: 04:54.