Working with events when clicking an item within a list javascript

Question

So, right now I have an html list and some javascript code to go with it. When an item in this list is clicked, it is bolded. This all works fine.

<ul>
    <li>apple</li>
    <li>orange</li>
    <li>banana</li>
</ul>
<!--result is an empty div, for now -->
<div id="result"></div>

<script>
    var list = document.getElementsByTagName("li");

    function markSelection() {
        if (this.style.fontWeight !== "bold") {
            this.style.fontWeight = "bold";
        } else {
            this.style.fontWeight = "normal";
        }
    }

    for (i = 0, len = list.length; i < len; i++) {
        list[i].onclick = markSelection;
    }
</script>

But, when I add some html to a div using javascript:

    $(document).ready(function () {
        document.getElementById("result").innerHTML = "";
        $(result).html("<ul><li>apple</li><li>orange</li><li>banana</li></ul>");
    });

the onclick bolding doesn't work for the items in this list. I'm not sure why. Here is a fiddle to show what I mean. The "dropdown" list isn't clickable but the bottom list is. http://jsfiddle.net/avfyvk2v/11/

Any idea how to make the dropdown list item bold on click?

UPDATE

I'm thinking it might be because I grab var list = document.getElementsByTagName("li"); before I add the new list. Working now, let me know if you have input. Thanks!

The items are being added after the listeners are attached, meaning the listeners aren't being subsequently attached to them too — Paul S.
– Paul S., Commented Sep 17, 2014 at 15:12
I tried adding list = document.getElementsByTagName("li"); after adding the new HTML but no luck. Any idea? — Harry
– Harry, Commented Sep 17, 2014 at 15:14

adeneo · Accepted Answer · 2014-09-17 15:19:42Z

1

You sure found an excellent way to complicate that one

$('#result').on('click', 'li', function() {
    $(this).css('font-weight', function(_, w) {
        return w === 'bold' ? 'normal' : 'bold';
    });
});

$('#result').html("<ul><li>apple</li><li>orange</li><li>banana</li></ul>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result"></div>

answered Sep 17, 2014 at 15:19

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Harry Over a year ago

"You sure found an excellent way to complicate that one" lol thanks for the help. As you can tell I'm new to web dev!

adeneo Over a year ago

Learning plain javascript is good, and it helps a lot, but if you're already using jQuery, try sticking to most of the simple methods it provides, it makes it a lot easier to write good code.

Harry Over a year ago

Gotchya, will def start to use as much jQuery. Thanks for the tip

Funk Forty Niner Over a year ago

I didn't know you could run/include code snippets. That is just too cool.

YuS · Accepted Answer · 2014-09-17 15:19:03Z

1

Use full power of jQuery:

$('#result').on('click', 'li', function() {
    $(this).toggleClass('bold');
});

In this case the event will fire for all li elements inside #result even if they were created dynamicaly. Also toggling css class will save some space.

http://jsfiddle.net/semencov/kn0w1y8m/

answered Sep 17, 2014 at 15:19

YuS

2,0531 gold badge15 silver badges24 bronze badges

Comments

Nico · Accepted Answer · 2014-09-17 15:15:42Z

0

You can use this :

var list = document.getElementsByTagName("li");

function markSelection() {
    if (this.style.fontWeight !== "bold") {
        this.style.fontWeight = "bold";
    } else {
        this.style.fontWeight = "normal";
    }
}
$('body').on('click', 'li', markSelection);

It will make jquery add a click event on every li element that are child of the body element.

answered Sep 17, 2014 at 15:15

Nico

7,0435 gold badges27 silver badges35 bronze badges

Comments

StartCoding · Accepted Answer · 2014-09-17 15:17:48Z

0

Try this, First add listelement to html and then apply click event:

$(document).ready(function () {
        document.getElementById("result").innerHTML = "";
        $(result).html("<ul><li>apple</li><li>orange</li><li>banana</li></ul>");
    });

 var list = document.getElementsByTagName("li");

    function markSelection() {
        if (this.style.fontWeight !== "bold") {
            this.style.fontWeight = "bold";
        } else {
            this.style.fontWeight = "normal";
        }
    }

    for (i = 0, len = list.length; i < len; i++) {
        list[i].onclick = markSelection;
    }

answered Sep 17, 2014 at 15:17

StartCoding

3935 silver badges16 bronze badges

Collectives™ on Stack Overflow

Working with events when clicking an item within a list javascript

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related