无法通过空格获取文本框值 - jquery

Question

我有一个文本框和一个按钮，我写了一个脚本，当点击按钮时，创建新文本框并将其添加到表单。

但是当我有32 bit之类的文字并点击按钮时，它创建了一个文本框，其值为32。我得到检查元素，结果是：

<input type="text" name="Options" class="field-input add-more" value="32" bit="">

我的剧本：

 $("#add-more").click(function(e){
    e.preventDefault();
    var text = $("#more-text");

    var newTag = '<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /><span class="btn-sm btn-danger remove-me field-input">x</span></div>';
    $("#frm-fields").append(newTag);
    text.val("");
});

请参阅以下示例。

＆＃13;

＆＃13;

 $("#add-more").click(function(e){
        e.preventDefault();
        var text = $("#more-text");

        var newTag = '<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /><span class="btn-sm btn-danger remove-me field-input">x</span></div>';
        $("#frm-fields").append(newTag);
        text.val("");
    });

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row "  id="div-fields">
            <div class="col-lg-12">
                
                <div class="form-horizontal" id="frm-fields-options">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="more-text" />
                            <div class="input-group-addon">
                                <span class="btn btn-sm btn-success" id="add-more">+</span>
                            </div>
                        </div>
                    </div>
                    <div id="frm-fields" class="row">
                     
                    </div>
                </div>
            </div>
         
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用jQuery方法 //Create a jQuery object var newTag = $('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>'); //Set the text and append to form $("#frm-fields").append(newTag.find('input').val(text.val()).end()); 通过将HTML字符串转换为jQuery对象来设置文本。

$("#add-more").click(function(e) {
  e.preventDefault();
  var text = $("#more-text");

  var newTag = $('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');

  $("#frm-fields").append(newTag.find('input').val(text.val()).end());
  text.val("");
});

＆＃13;

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row " id="div-fields">
  <div class="col-lg-12">

    <div class="form-horizontal" id="frm-fields-options">
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" id="more-text" />
          <div class="input-group-addon">
            <span class="btn btn-sm btn-success" id="add-more">+</span>
          </div>
        </div>
      </div>
      <div id="frm-fields" class="row">

      </div>
    </div>
  </div>

</div>

＆＃13;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Data.Entity;

namespace ConsoleApplication2
{
class Program
{
    static void Main(string[] args)
    {
        using (var db = new BloggingContext())
        {
            // Create and save a new Blog 
            Console.Write("Enter a name for a new Blog: ");
            var name = Console.ReadLine();

            var blog = new Blog { Name = name };
            db.Blogs.Add(blog);
            db.SaveChanges();

            // Display all Blogs from the database 
            var query = from b in db.Blogs
                        orderby b.Name
                        select b;

            Console.WriteLine("All blogs in the database:");
            foreach (var item in query)
            {
                Console.WriteLine(item.Name);
            }

            Console.WriteLine("Press any key to exit...");
            Console.ReadKey();
        }
    }
}

public class Blog
{
    public int BlogId { get; set; }
    public string Name { get; set; }

    public virtual List<Post> Posts { get; set; }
}

public class Post
{
    public int PostId { get; set; }
    public string Title { get; set; }
    public string Content { get; set; }

    public int BlogId { get; set; }
    public virtual Blog Blog { get; set; }
}

public class BloggingContext : DbContext
{
    public DbSet<Blog> Blogs { get; set; }
    public DbSet<Post> Posts { get; set; }
}
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您忘记包含双引号：

 $("#add-more").click(function(e){
        e.preventDefault();
        var text = $("#more-text");

        $("#frm-fields").append('<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value="' + text.val().replace(/\"/g, '&quot;') + '" /><span class="btn-sm btn-danger remove-me field-input">x</span></div>');
        text.val("");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row "  id="div-fields">
            <div class="col-lg-12">
                
                <div class="form-horizontal" id="frm-fields-options">
                    <div class="form-group">
                        <div class="input-group">
                            <input type="text" class="form-control" id="more-text" />
                            <div class="input-group-addon">
                                <span class="btn btn-sm btn-success" id="add-more">+</span>
                            </div>
                        </div>
                    </div>
                    <div id="frm-fields" class="row">
                     
                    </div>
                </div>
            </div>
         
        </div>

Answer 3

此行不平衡。值属性的开头和结尾引用不正确。

'<div class="col-lg-3"><input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' />

此外，您需要检查引号之间是否有空行

$("#more-text").val(" ");

JS

$("#add-more").click(function(e){
            e.preventDefault();
            var text = $("#more-text").val();
              console.log(text);
            var newTag = '<div class="col-lg-3">'+
                              '<input type="text" name="Options" class="field-input add-more" value="'+text+'"/>'+
                                  '<span class="btn-sm btn-danger remove-me field-input">x</span>'+
                             '</div>';
            $("#frm-fields").append(newTag);
            $("#more-text").val(" ");
        });

JSFIDDLE

Answer 4

您必须在值属性周围加上""引号，因为值是以空格分隔的：

value="'+ text.val() + '"