我想在我的准备列表项上创建一个按钮

I want to create a button along my prepend list item

本文关键字：创建 按钮 一个 我的 列表      更新时间：2023-09-26

我最近启动了JQuery，需要使用日期选择器JQuery函数创建一个列表。问题始于我的预处理，因为我必须预处理从日期选择器、事件和一个新按钮获得的日期，以删除该行中的任何内容（因此该按钮必须沿列表项预处理）。这部分我有点麻烦。

这是我的代码：

<!doctype html>
<html lang="en">
     <head>
      <meta charset="utf-8">
      <title>jQuery UI Datepicker - Display month &amp; year menus</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link rel="stylesheet" href="css.css">
      <script>
      $(function() {
        $( "#datepicker" ).datepicker({
          changeMonth: true,
          changeYear: true
        });
      });
      $(document).on('click', '#bta', '#apagar', function () {
        if ($('#datepicker').val() != '' && $('#evento').val() != '' ) {
            $('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + $('<input type="button" id="apagar" value="apagar" />') + '</p>');
            $('input').val('');
        }
    });
      </script>
    </head>
    <body>
        <div id="box">
            Lista de Tarefas:
            <br><br>
            Date: <input type="text" id="datepicker"> &nbsp; &nbsp;
            Event: <input type="text" id="evento">    <button id="bta" class="bta">+</button>
            <div id="caixa">  </div>
            </body>
        </div>
</html>

我很确定这可能很简单，但我现在才开始四处寻找，我试图搜索的所有内容要么过于复杂，要么无法解决我的问题。。。当然，我无法实施我发现的解决方案可能也是一个问题。

这是为了帮助可视化我的问题

jQuery.prepend采用的参数是htmlString或Element、Array或jQuery元素。您选择了一个htmlString，但正在向该字符串中添加一个jQuery对象。这显然是行不通的。

我们到底想要什么？好吧，我们想要创建一个<p>标记，然后附加日期选择器值、事件值和按钮。

var $p = $("<p></p>");
$p.append($('#datepicker').val(), $('#evento').val(), $('<input type="button" id="apagar" value="apagar" />'));
$('#caixa').prepend($p);

或者，跳过将字符串转换为jquery对象，再转换为字符串的步骤。

$('#caixa').prepend('<p>' + $('#datepicker').val() + $('#evento').val() + '<input type="button" id="apagar" value="apagar" /></p>');
相关文章：