Home/ Questions/Q 9161555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T13:59:32+00:00

Here’s what I’m trying to do: I have an input field one can use

  • 0

Here’s what I’m trying to do:
I have an input field one can use to add entries to a todo list. I use JQuery to display a sorted list of entries after the user clicks ‘Add’. I also made the list sortable (You can change the order by mouse drag using jQuery.) Now what I want to bold an individual list item when it is double-clicked. Somehow I’m not getting the jQuery to select the right item…

Here’s my code.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
        <script type="text/javascript" src='script.js'></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <title>Tadum</title>
    </head>
    <body>
     <h2>Tadum - The ToDo List</h2>

     <h3>Enter New ToDos</h3>
        <form id="addForm">
            <input type="text" name="ToDoListItem"></input>
        </form>
        <div id="button">Add!</div>
     <h3>Your ToDos</h3>
        <ol class="todolist"></ol>
    </body>
</html>

CSS:

.todolist li{
font-weight: normal;
}
.todolist {
    font-family:garamond;
    color:#cc0000;
}

Javascript

$(document).ready(function() {
    $('#button').click(function(){
        var toAdd = $('input[name=ToDoListItem]').val();
        $('.todolist').append('<li class="item">'+toAdd+'</li>');
        $('#addForm')[0].reset();
    });
    $('ol').sortable();
    $('ol').css('cursor', 'pointer');


    $('.todolist li').dblclick(function(){
       $(this).css('font-weight', 'bold'); 
    });
});

NOTE:

Somehow what works is if I replace the .list li in jQuery and in the CSS stylesheet with a simple ol. Then a doubleclick displays all items in the list (which is, of course, not what I want). But somehow I can’t figure out how to only select the individual <li> that is doubleclicked with jQuery…

(I also tried a bunch of variations on this. For example, only use ‘li’ to select the doubleclicked item or use ‘ol li’, or ‘.item li’. None of them work.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to bind the dblclick event handler to the newly added list items, like this:

    $(document).on('dblclick', '.todolist li', function(){
    $(this).css('font-weight', 'bold'); 
});

    Please note that this doesn’t toggle the style, but just makes them bold on double click. If you double click again it won’t do anything.

    Also if I may suggest some other changes to your JavaScript code: Your form can be normally submitted like any other form, for the purposes of this to do list anyways. I’ve also added a label to the HTML <form> for accessibility purposes.

    $(document).ready(function() {
    $('#addForm').submit(function(e){
        e.preventDefault();

        $('.todolist').append('<li class="item">' + $('#ToDoListItem').val() + '</li>');
        $(this)[0].reset();
    });

    $('ol').sortable().css('cursor', 'pointer');

    $(document).on('dblclick', '.todolist li', function() {
       $(this).css('font-weight', 'bold'); 
    });
});

    HTML

    <form id="addForm">
    <label for='ToDoListItem'>Item:</label>
    <input type="text" id="ToDoListItem" />
    <button type='submit'>Add!</button>
</form>
    • 0