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

将此添加到您的代码中：

nlykkei@nlykkei-ThinkPad-X200s ~ $ sudo chroot /bin /bash
[sudo] password for nlykkei: 
chroot: failed to run command ‘/bash’: No such file or directory

}）;

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上添加文本

2 个答案: