add text on click jquery

Question

I´d like to know if someone can tell me why the added html in javascript is not working as the not added text. meaning that if I add the text x-editable is not working. Following the scripts:

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'
    }],

 });

 });

or:

jsfiddle

Answer 1

You are not making generated elements editable.

check this jsfiddle

On the click of button you are creating controls but not making them editable as you did for your first set of controls.

Make them editable as you create them.

Check following code:

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

    });

});