单击时添加文本 jquery

Question

我想知道是否有人可以告诉我为什么在 javascript 中添加的 html 不能像未添加的文本那样工作。这意味着如果我添加文本 x-editable 将不起作用。按照脚本：

html:

<div id='TextBoxesGroup'>
  <div id="TextBoxDiv1">
   <input type='button' value='Add Button' id='addButton'>
  </div>
    <p class="sm"><strong><a href="#" id='break1' data-type="text" data-pk="1" data-title="" >3 </a></strong><a href="#" id="break2" data-type="select" data-pk="1" data-title="">&nbsp;NORMAL</a><span>TEXT</span>
    </p>
</div>

javascript:

$(document).ready(function () {

var counter = 2;

$("#addButton").click(function () {

    if (counter > 10) {
        alert("Only 10 textboxes allow");
        return false;
    }

    var newTextBoxDiv = $(document.createElement('p'))
        .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<p class="sm"><strong><a href="#" id="break3' + counter + '" data-type="text" data-pk="1" data-title="" >3 </a></strong><a href="#" id="break4' + counter + '" data-type="select" data-pk="1" data-title="">&nbsp;NORMAL</a><span>TEXT</span></p>');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
  });
});
$(function () {
 $.fn.editable.defaults.mode = 'inline';
  $('#break1').editable();
  $('#break2').editable({
    prepend: "TEXT",
    placement: 'top',
    source: [{
        value: 1,
        text: 'TEXT1'
    }, {
        value: 2,
        text: 'TEXT2'
    }],

});
  $('#break32').editable();
  $('#break42').editable({
    prepend: "TEXT",
    placement: 'top',
    source: [{
        value: 1,
        text: 'TEXT1'
    }, {
        value: 2,
        text: 'TEXT2'
    }],

 });

 });

或：

jsfiddle

Answer 1

将此添加到您的代码中：

$($(newTextBoxDiv).find("a")[0]).editable();
$($(newTextBoxDiv).find("a")[1]).editable({
   prepend: "TEXT",
   placement: 'top',
   source: [{
       value: 1,
       text: 'TEXT1'
   }, {
       value: 2,
       text: 'TEXT2'
   }],

});

Here is the JSFiddle demo

您的代码运行在您的页面加载时执行一次，因此它使您指定的可用字段可编辑。

但是当在运行时间内生成新字段时，没有为它们执行任何代码以使其可编辑。

因此我添加了上面的代码，使生成的字段可以在生成后立即编辑。

Answer 2

您没有让生成的元素可编辑。

检查这个 jsfiddle

在单击按钮时，您正在创建控件，但不像您对第一组控件所做的那样使它们可编辑。

创建它们时使其可编辑。

检查以下代码：

    $(document).ready(function () {

    var counter = 2;

    $("#addButton").click(function () {

        if (counter > 10) {
            alert("Only 10 textboxes allow");
            return false;
        }

        var newTextBoxDiv = $(document.createElement('p'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<p class="sm"><strong><a href="#" id="break3' + counter + '" data-type="text" data-pk="1" data-title="" >3 </a></strong><a href="#" id="break4' + counter + '" data-type="select" data-pk="1" data-title="">&nbsp;NORMAL</a><span>TEXT</span></p>');

        newTextBoxDiv.appendTo("#TextBoxesGroup");

 $.fn.editable.defaults.mode = 'inline';
    $('#break3'+counter).editable();
    $('#break4'+counter).editable({
        prepend: "TEXT",
        placement: 'top',
        source: [{
            value: 1,
            text: 'TEXT1'
        }, {
            value: 2,
            text: 'TEXT2'
        }],

    });



        counter++;
    });
});
$(function () {

 $.fn.editable.defaults.mode = 'inline';
    $('#break1').editable();
    $('#break2').editable({
        prepend: "TEXT",
        placement: 'top',
        source: [{
            value: 1,
            text: 'TEXT1'
        }, {
            value: 2,
            text: 'TEXT2'
        }],

    });

});

单击时添加文本 jquery

add text on click jquery

html

javascript

jquery

x-editable