添加文本点击jquery

add text on click jquery

本文关键字：jquery 文本 添加      更新时间：2023-09-26

我想知道是否有人能告诉我为什么在javascript中添加的html不能作为未添加的文本工作。这意味着如果我添加文本，x-edit是不工作的。脚本如下:

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

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

check this jsfield

在单击按钮时，您正在创建控件，但不能像创建第一组控件那样使其可编辑。

让它们在创建时可编辑。

检查以下代码:

    $(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'
        }],
    });
});

将此添加到您的代码中:

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

});这里是JSFiddle演示

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

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

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

相关文章：