在jquery中单击动态更改Label上的文本

时间:2014-04-25 07:58:08

标签: javascript php jquery html

我的网页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脚本似乎没有被调用。

JS函数应该将代码中定义的标签文本设置为

可能是什么问题?

2 个答案:

答案 0 :(得分:1)

动态添加元素需要 event delegation

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

答案 1 :(得分:0)

尝试使用 event delegation 来动态添加元素:

  

事件委托允许我们将单个事件监听器附加到   父元素,将为匹配a的所有后代触发   选择器,无论这些后代现在存在还是被添加到   将来

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