使用jQuery從動態創建的訂單列表中獲取所選列表值

Question

我創建了一個具有類名稱的動態訂單列表，如下所示

    $orderList = $('.questOl');

    for(var i=0; i<questList.length; i++){
        tr.push('<li class="questList">' + questList[i].questText + '</li>');
        tr.push('<p>&nbsp</p>')                     
    }
    $orderList.append($(tr.join('')));

然后，我想在選擇列表時獲取列表值。 我已經在這個網站上嘗試了幾個代碼段。 它給出未定義的值。 使用此行代碼的最接近嘗試。

var x = $('.questOl').find('.questList').text();

但這需要從列表中獲取所有價值。 我想要的只是當前選定的值。 任何想法？

Answer 1

您可以根據迭代器為<li>標記設置一個“ id”：

for(var i=0; i<questList.length; i++){
    tr.push('<li class="questList" id="quest-' + i + '">' + questList[i].questText + '</li>');
    tr.push('<p>&nbsp</p>')                     
}

然后像這樣訪問它：

var x = $('#quest-1').text();

希望能幫助到你。

編輯

如果您使用click事件來選擇列表中的元素，則可以使用以下函數獲取其值：

$('.questList').click(function(){
    var x = $(this).text();
});

在這種情況下，不需要“ id”或“ data”屬性。

PS：如果我錯了，請糾正我，但具有數據屬性，我想知道使用女巫的問題也一樣。

Answer 2

您可以執行以下操作：

1. 使用動態元素創建li而不是編寫html。 （ 可選的 ）

for(var i=0; i < questList.length; i++)
{
  tr.push('$('<li/>',
    { 
      class : "questList",
      text : questList[i].questText 
    }));
    tr.push('$('<p/>',  
    { 
      text : " " 
    }));
}

2. 選擇時獲得li值。

   由於您是動態創建元素的，因此可以在創建的li上委派click事件，並在文檔級別上注冊它，以便文檔可以偵聽標記。

$(document).on('click','.questOl .questList', function()
{
    var selectedLiText = $(this).text();
});