Динамическое изменение текста метки на клик в jquery

0

Мой веб-html имеет следующий код

<script  src="js/jquery.flexslider.js"></script>
<script  src="js/jquery.rings.js"></script>

Содержимое jquery.rings.js:

$('input[type="image"]').click(function()
{
   $ring = $(this).data('my-info');
   $('label#ringName').text($ring['ringSetName']);
});


/***************************************************/

Мой код Html отображает массив колец

$db = new db();
$rings = $db->query("SELECT * FROM rings");

Во время выполнения я добавляю изображения в слайдер, как следует

<div class="albums-div">
    <ul class="slides">

        <?php



 foreach($rings as $ring)
          {
             echo '<li> <input type="image" src="' . $ring['ringThumbNailImagePath'] . '" name="checked" value="" data-my-info="' . $ring . '" width="150" height="150" /></li>';
           }   



         ?>
    </ul>
</div>

Проблема в том, что при нажатии на изображение ничего не происходит, похоже, JS-скрипт не вызван.

Функция tHE JS должна устанавливать текст метки, определенной в коде, как

В чем может быть проблема?

  • 1
    Мой HTML-код получает массив колец - О, смотри, волшебник!
Теги:

2 ответа

1
Лучший ответ

Для добавления динамически добавленных элементов требуется делегирование событий:

$(document).on('click','input[type="image"]',function()
{
  $ring = $(this).data('my-info');
  $('label#ringName').text($ring['ringSetName']);
});
Поделиться
  • 0
    Спасибо, это работает, однако $ ring = $ (this) .data ('my-info'); это не работает, вы можете сказать, почему я не получаю то, что я установил в качестве данных?
  • 0
    @MuhammadUmar: здесь отлично работает
Показать ещё 7 комментариев
0

Попробуйте использовать делегирование событий для динамически добавленных элементов:

Делегирование событий позволяет нам присоединить одного прослушивателя событий к родительскому элементу, который будет срабатывать для всех потомков, соответствующих селектору, независимо от того, существуют ли эти потомки или добавлены в будущем.

$('body').on('click','input[type="image"]',function()
{
   $ring = $(this).data('my-info');
   $('label#ringName').text($ring['ringSetName']);
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню