動態更改jquery中單擊時的Label文本

Question

我的網頁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函數應將代碼中定義的標簽文本設置為

可能是什么問題呢？

Answer 1

您需要事件委派才能動態添加元素：

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

Answer 2

嘗試將事件委托用於動態添加的元素：

通過事件委托，我們可以將單個事件偵聽器附加到父元素，該元素將為與選擇器匹配的所有后代觸發，無論這些后代現在存在還是將來添加。

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