我想在我的前置列表项目中创建一个按钮

时间:2016-05-08 11:27:18

标签: javascript jquery html

我最近启动了JQuery,我需要使用datepicker JQuery函数创建一个列表。问题从我的prepend开始,因为我必须在datepicker,事件和一个新按钮之前添加我从日期获取的日期,以及ERASE在该行中的任何内容(因此按钮必须在列表项之前添加)。我在这部分遇到了一些麻烦。

这是我的代码:

<!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>

我很确定这可能非常简单,但我现在才开始四处搜寻,我尝试搜索的所有内容都过于复杂或者无法解决我的问题...当然我无法实施解决方案我发现也可能是个问题。

This is to help visualize my problem

1 个答案:

答案 0 :(得分:1)

Handler接受htmlString或Element或Array或jQuery元素的参数。您选择了一个htmlString,但是正在向该字符串添加一个jQuery对象。这显然不起作用。

我们真正想要的是什么?好吧,我们要创建一个jQuery.prepend标签,然后附加datepicker值,事件值,然后是按钮。

<p>

或者,跳过将字符串转换为jquery对象,返回字符串的步骤。

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