Question

这里的学生在练习.js和jquery的过程中遇到了一个问题。我正在创建一个看板，并尝试为我制作的每张新卡片添加一个日期选择器。

这是我的脚本，用于向板上添加新卡：

$(function() {
        $( '.sortable' ).sortable({
            connectWith: ".connectedSortable",
        }).disableSelection();
        $('.addbutton').click(function() {
            var newItem = $('#new').val();
            $(this).closest('div.container').find('ul').append('<li class="card"><input type="checkbox"> '+newItem+ ' <p>Due Date: <input id="datePicker3" placeholder="MM/DD/YYYY"></p></li></form></input>');
        });
    });

我的板上有一些使用

的卡

 $( function() {
        $( '#datePicker' ).datepicker();
    } );

但是我不确定从哪里开始添加ID相同的动态日期选择器。我环顾四周，看到了一些使用按钮的示例，但我试图将其自动包含在新卡中- HTML部分如下所示，FWIW

<div>
<div class="container" style="background:linear-gradient(180deg, steelblue, lightsteelblue);">
    <h2>New Issues</h2>

    <ul class="sortable connectedSortable">
        <form action=""><li class="card"><input type="checkbox">Do CS 81 Homework
            <p>Due Date: <input id="datePicker" placeholder="MM/DD/YYYY"></p>

        </li>
    </ul></form></input>
    <button onclick="hide_cb();">Delete</button>
    <div class = "center">
        <div class="addnewcard, centered">
            <input type="text" id="new" value="" placeholder="Add text for a new card here!"/>
            <input type="button" id="btnAddNew" value="Create New Card" class="addbutton"/>
        </div>
    </div>
</div>

请给我一些帮助吗？非常感谢：）

Answer 1

您需要将其设置为类，而不用担心它的独特性

$(this).closest('div.container').find('ul').append('<li class="card"><input type="checkbox"> '+newItem+ ' <p>Due Date: <input class="datePicker" placeholder="MM/DD/YYYY"></p></li></form></input>');

然后是您的jQuery

$( '.datePicker' ).datepicker();

Answer 2

首先，您的html没有正确嵌套。 ul，表单和输入结束标记不正确。对于您的js：

int

动态添加日期选择器

2 个答案: