使用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();
});