dongcheng dongcheng - 28 days ago 7
jQuery Question

Get the selected list value from dynamically created order list using jQuery

I have a created dynamic order list with class name as follows

$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('')));


Then I want to get the list value when I selecting it. I have tried several code snippet in this website. It give undefined value. The closest attempt using this line of code.

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


But it take all the value from the list. What I want is current selected value only. Any idea?

Answer

Here are the things you can do :

  1. Create li using dynamic element creating rather writing html. ( optional )

 

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

    Since you are creating the elements dynamically, you can delegate a click event on the li you created and register it on the document level so that the document could listen to the markup.

 

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