1

I am dynamically generating a div tag after the page loads. this is the script which i am using. i want to insert an element inside a div element. but it is getting placed outside. 

var newTag = 0

$("#addNewTag").on('click', '', function () {
    andTag = andTag + 1
    var stringTemplate = "<div id=\"newTag" + newTag + "\"><input type=\"button\" value=\"[+]\" id=\"addfield\"></div>";
    var parentID = "#" + $(this).parent().attr('id');
    $(parentID).append(stringTemplate);
    $("#signatureContent").each(function () {
        var content = $(this);
        angular.element(document).injector().invoke(function ($compile) {
            var scope = angular.element(content).scope();
            $compile(content)(scope);
        });
    });
});



$("body").on('click', '#addfield', function () {
    sfieldnum = sfieldnum + 1;
    var stringMatchTemplate = "some dynamic content";
    var parentID = "#" + $(this).parent().attr('id');
    $(parentID).append(stringMatchTemplate);
    $("#signatureContent").each(function () {
        var content = $(this);
        angular.element(document).injector().invoke(function ($compile) {
            var scope = angular.element(content).scope();
            $compile(content)(scope);
        });
    });
});

I want the HTML to be something like this after the first script

<new>
[+]
</new>

When i press [+] i want to insert a text box .

BUt what i am getting is something like this..

<new>
[+]
</new>
{text box appears here instead of appearing inside the new tag.}

what am i doing wrong here ?

Thanks.

Bala
  • 381
  • 3
  • 16
  • The structure you said that you are getting and the one you said that you want are the same in the question. What is it that you want the HTML structure to look like? – IronFlare Apr 06 '15 at 17:25
  • First off, change `$("#addNewTag").on('click', '', function () {` to `$("#addNewTag").on('click', function () {` – lshettyl Apr 06 '15 at 17:28
  • I mean the tag structure. "new" is a tag and i want to insert text box inside this. – Bala Apr 06 '15 at 17:29
  • `$("#signatureContent").each` doesn't make sense since ID's must be unique by definition. Why aren't you using angular to generate your html? Your jQuery approach to creating DOM is all wrong in an angular app – charlietfl Apr 06 '15 at 17:32
  • I am trying to refresh the div and update the DOM database. as all the contents are generated dynamically – Bala Apr 06 '15 at 17:33
  • But in an angular app you update the data and let angular manage the DOM for you. Get rid of using jQuery completely for what you are doing or you are creating a lot of problems you don't need – charlietfl Apr 06 '15 at 17:34
  • suggest you read [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – charlietfl Apr 06 '15 at 17:45

0 Answers0