CODEWITHSUNDEEP
javascriptjqueryhtml
shell
shell

Reputation: 1937

Jquery programatically adding li, getting id returns all li elements

I am adding li elements to a menu programatically every time the user clicks a button. Here is the starting menu:

<ul id="menu">
   <li><a href='#'>Add to this menu</a>
        <ul class = 'addition'>
        </ul>
   </li>
</ul>

I then add to it using this:

$("#menu ul.addition").append('<li><a href="#" id=addition' + userText + '>addition' + userText + '</a></li>');

Where user text is some unique String added by the user. The problem is that when I try to get a specific li from the menu after it is populated, it only returns the first li.

$("#menu ul.addition").click(function() {
    var selected = $('#menu ul.addition a').attr('id');
    console.log(selected);
});

always logs the first menu item even though there are many being populated. when I change the selection to to select the html like so:

var selected = $(this).html();
console.log(selected);

It just logs every li element added to the menu.

What am I doing wrong here? I need to select the correct menu option that the user clicks on.

Upvotes: 2

Views: 494

Answers (6)

Alp
Alp

Reputation: 3105

I think you are more or less on the the right track. If you slightly changed your click function, you can get the ID of the menu option, clicked by the user. Here is a fiddle for it. 

$("#menu ul.addition").click(function(e) {
    alert(e.target.id);
    for (var prop in e) {
        console.log(prop + " : " + e[prop]);
    }
    $('#menu ul.addition a').attr('id');
//    console.log(selected);
});

Upvotes: 1

showdev
showdev

Reputation: 29168

When you access an attribute for a set of multiple elements, you'll get the attribute of the first element in the set. In your code, you're selecting the id of the first <a> element in your <ul> upon any click on the <ul>.

In order to identify which <a> was clicked, its easiest to listen for a click on the <a> elements rather than on the <ul> container.

Since the <li> and <a> elements are added after the DOM loads, you'll need to delegate your click handler. I suggest binding the listener to your existing <ul>, but listening for a click on any programmatically-added child li > a element.

Then, you can use JavaScript's this keyword to refer to the clicked element and collect its "id".

var userText="SampleText";
$("#menu ul.addition").append('<li><a href="#" id="addition' + userText + '">addition' + userText + '</a></li>');

userText="AnotherSample";
$("#menu ul.addition").append('<li><a href="#" id="addition' + userText + '">addition' + userText + '</a></li>');


$("#menu ul.addition").on('click','li a',function() {
    var selected = this.id;
    $('div#output').html(selected);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
   <li><a href='#'>Add to this menu</a>
        <ul class = 'addition'>
        </ul>
   </li>
</ul>

<div id="output"></div>

Upvotes: 4

Gabriel Rodrigues
Gabriel Rodrigues

Reputation: 510

If you want to get the specific li you need to use this example:

$("#add").click(function() {
  $(".addition").append('<li><a href="#">Item 1</a></li>');
  $(".addition").append('<li><a href="#">Item 2</a></li>');


  $(".addition li a").click(function() {
    var item = $(this).text();
    alert(item);
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
  <li><a href='#' id="add">Add to this menu</a>
    <ul class="addition">
    </ul>
  </li>
</ul>

Upvotes: 0

Hanif Bali
Hanif Bali

Reputation: 71

First of all, you have change <a href="#" id=addition' + userText + '> to <a href="#" id="addition' + userText + '">

When you run $('#menu ul.addition a') jquery returns all the <a> nodes, but when you try to get the ID of a set, Jquery selects the first node in the set.

If you want to select a specific item on the list, use the unique ID.

$('#menu ul.addition #your-unique-id).click(doSomething)

if you want to create a generic function for clicking any of the added items:

$("#menu ul.addition").on('click', 'a', function(ev){
console.log(this);
})

Upvotes: 0

Sky Fang
Sky Fang

Reputation: 1101

var $li = $('<li><a href="#" id=addition' + userText + '>addition' + userText + '</a></li>');
$li.click(function(){
var selected = $(this).html();
console.log(selected);
});
$("#menu ul.addition").append($li);

It seems this is what you want

Upvotes: 0

galki
galki

Reputation: 8715

$("#menu ul.addition").on('click', 'li', function() {
console.log($(this).attr('id'));
});

Upvotes: -1

Related Questions