javascript - 我想沿着我的前置列表项创建一个按钮

标签 javascript jquery html

我最近启动了 JQuery,需要使用 datepicker 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>

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

This is to help visualize my problem

最佳答案

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

关于javascript - 我想沿着我的前置列表项创建一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37099284/

相关文章:

javascript - 如何从数组中选择一个随机对象然后将其删除以免重复?

Javascript 按 JSON 对象中的值递增数组中的值

javascript - 单击此子项中的链接添加关闭功能

Javascript 代码在 html 下拉选项元素中不起作用

javascript - 单击jquery将按钮变成ajax加载器

javascript - 使用 javascript Onclick 将数据传递到数据库

javascript - 使用 jquery 打开对话框

html - 图片显示在不同的地方取决于浏览器

html - 如何获取纯文本代码

jquery - $(window).scroll() 循环,由于没有变量