3

这就是我想要做的事情：我有一个输入字段，可以用来将条目添加到待办事项列表中。在用户单击“添加”后，我使用 JQuery 显示条目的排序列表。我还使列表可排序（您可以使用 jQuery 通过鼠标拖动来更改顺序。）现在我想在双击单个列表项时将其加粗。不知何故，我没有让 jQuery 选择正确的项目......

这是我的代码。

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'); 
    });
});

笔记：

如果我将.list lijQuery 和 CSS 样式表中的ol. 然后双击显示列表中的所有项目（当然，这不是我想要的）。但不知何故，我无法弄清楚如何只选择<li>用 jQuery 双击的个人......

（我还尝试了很多变体。例如，只使用“li”来选择双击的项目或使用“ol li”或“.item li”。它们都不起作用。）

4

2 回答 2

5

您需要将dblclick事件处理程序绑定到新添加的列表项，如下所示：

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

请注意，这不会切换样式，而只是在双击时使它们变为粗体。如果你再次双击它不会做任何事情。

另外，如果我可以建议对您的 JavaScript 代码进行一些其他更改：您的表单通常可以像任何其他表单一样提交，无论如何都要这样做。<form>为了便于访问，我还向 HTML 添加了一个标签。

$(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>
于 2013-01-18T08:21:19.207 回答
1

您在创建文档后添加 li 项目。所以你需要使用“on”方法，这样你就可以在之后触发对新创建的项目的点击。

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

        var toAdd = $('#ToDoListItem').val();
        $('.todolist').append('<li class="item">'+toAdd+'</li>');
        $('#ToDoListItem').reset();
    });

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

    $(document).on('dblclick','li.item',function(){
       $(this).css('font-weight', 'bold'); 
    });
});
于 2013-01-18T08:25:46.023 回答