Question

我将文本框值添加为Baker's Basket, Pune, Maharashtra, Indiasd，但在文本框中的点击事件中，它仅显示Baker's

我想在文本框中显示全文Baker's Basket, Pune, Maharashtra, Indiasd。

// Try to Enter text given bellow 
//Baker's Basket, Pune, Maharashtra, Indiasd

$("#clk").on('click', function () {
    $("#cnt_div").empty();
    var getTxt = $("#txt_n").val();
    var addContent = "<input type='text' value=" + getTxt + " />";
    $("#cnt_div").append(addContent);
});

没有editng addContent 变量

编辑： 的 JS FIDDLE SAMPLE TWO

$("#clk").on('click', function () {

    var gData1 = $("#txt_1").val();
    var gData2 = $("#txt_2").val();
    var gData3 = $("#txt_3").val();
    var cnt_1 = "<span class='lbl_normal_mode'>" + gData1 + "</span><input class='txt_edit_mode' value=" + gData1 + "  type='text'/>";
    var cnt_2 = "<span class='lbl_normal_mode'>" + gData2 + "</span><input class='txt_edit_mode' value=" + gData2 + "  type='text'/>";
    var cnt_3 = "<span class='lbl_normal_mode'>" + gData3 + "</span><input class='txt_edit_mode'  value=" + gData3 + " type='text'/>";

    var content_Data = "<div class='chunk_div_holder'><div style='float:left:width:100%'>" + cnt_1 + "</div><div style='float:left:width:100%'>" + cnt_2 + "</div><div style='float:left:width:100%'>" + cnt_3 + "</div></div>";
    $(".dynmic_cntt").append(content_Data);
});

Answer 1

您最好动态地将元素及其属性作为对象附加：

$('<input>', {
    type: 'text',
    value: $("#txt_n").val()
}).appendTo($("#cnt_div").empty());

这将解决value=Baker's Basket属性的额外空格（没有value的引号），错误的字符串转义（如果值有引号）的问题以及其他警告。

N.B。： textbox元素没有<input>类型。它应该是text。

DEMO： http://jsfiddle.net/ZyMCk/11/

Answer 2

这是一个更好的方法......

var addContent=$("<input type='textbox' />").val(getTxt);

http://jsfiddle.net/ZyMCk/9/

基本上，如果创建一个附加到DOM的元素，最好将其作为jQuery对象。这样我们就可以利用诸如val（）之类的方法来添加值。

<强>更新

我为你简化了一些事情......

JSFIDDLE： http://jsfiddle.net/ZyMCk/22/

$("#clk").on('click', function () {

    $('.dynmic_cntt').empty();

    $('.form-text').each(function(){
        var $div = $('<div style="float:left:width:100%;"></div>');
        var $span = $('<span class="lbl_normal_mode">'+ $(this).val() +'</span><input class="txt_edit_mode" value="'+$(this).val() +'"  type="text"/>');

        $('.dynmic_cntt').append( $div.append( $span ) );
    });

});

Answer 3

分两个阶段添加字段：

添加字段，因为您已经
使用.val（）

Answer 4

值属性应该用引号括起来。在您的情况下，最好使用双引号，因为Baker's Basket, Pune, Maharashtra, Indiasd已经包含单引号。

$("#clk").on('click',function(){
     $("#cnt_div").empty();
var getTxt=$("#txt_n").val();  
var addContent="<input type='textbox'  value=\""+getTxt+"\" />";
    $("#cnt_div").append(addContent);
});

Fiddle

修改

$("#clk").on('click',function(){ $("#cnt_div").empty(); var getTxt=$("#txt_n").val(); var addContent=$("<input/>",{type:"text",value:getTxt}); $("#cnt_div").append(addContent); });

<强> Updated fiddle

Answer 5

这是因为你没有逃避'单引号。相反，你可以替换

这一行

var addContent="<input type='textbox' value='"+getTxt+"' />";

带

var addContent=$("<input type='textbox' />").val(getTxt);

或

var addContent="<input type='textbox' value=\""+getTxt+"\" />";

Answer 6

将"+getTxt+"更改为'"+getTxt+"' fiddle

OR

将"+getTxt+"更改为\""+getTxt+"\"

动态添加文本框，给定值未正确添加，jquery

6 个答案: