CODEWITHSUNDEEP
javascriptjqueryhtml
dude
dude

Reputation: 33

how to generate variable ids for html tags inside append function in jquery

this is my code and i want to generate variable ids for the html tags inside the append function while the ids are generating outside where variables are declared but its not taking inside .. 

  <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery Bind onclick Event to Dynamically added Elements</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript" src="scriptj.js"></script>
    <script type="text/javascript">
        i=0;
        $(document).ready(function(){
            $("#add").click(function func(){
                ++i;
                console.log(i);
                var rem = 'remove' + i; //  here the ids are generating but they 
                var tblid = 'id' + i;   // not going inside append function
                var imgdiv = 'idiv' + i; 
                var imag = 'img' + i;
                $("#diva").append("<div id=tblid style='border:2px solid black; border-radius:5px;'><table align='right'><tr><td><a href='javascript:void(0);' id=rem >Delete</a></td></tr></table><table  align='center'><tr><td>Section Title</td><td><input type='textbox' size='160' /></td></tr><tr><td>Descrtiption</td><td><textarea rows='5' cols='162' style='border-radius:5px;'></textarea><td></tr></table><br>&nbsp &nbsp<input type='file' onchange='readURL(this);'/><div id=imgdiv style='border: 1px solid black'><img id=imag alt='your image' /></div></div><br>"); 
            });
            $(document).on("click", "a#rem" , function() {  
                $(this).parent().parent().parent().parent().parent().remove();  
            });
        }); 
    </script>
    </head> 
    <body>
        <table><tr><td><button id="add" style='border-radius:3px;'>Add Section</button></td></tr></table>
        <br>
        <div id="diva">

        </div>
    </body> 
    </html>

Upvotes: 1

Views: 614

Answers (3)

Hemal
Hemal

Reputation: 3760

You should write your .append() like this because you are concatenating a variable.

$("#diva").append("<div id='" + tblid + '>");

Upvotes: 1

el3ati2
el3ati2

Reputation: 495

You are not calling the variables in your code. They are being interpreted as string.

For example, in this part of your code:

 $("#diva").append("<div id=tblid style='border:2px solid black; ....

tblid is being considered as a string and not as a variable. You need to concatenate strings and variables, like so:

$("#diva").append("<div id=" +tblid+ " style='border:2px solid black; ...

Upvotes: 2

Shyju
Shyju

Reputation: 218732

Use the variables when you build the markup.

  var rem = 'remove' + i; //  here the ids are generating but they 
                var tblid = 'id' + i;   // not going inside append function
                var imgdiv = 'idiv' + i; 
                var imag = 'img' + i;

  var m ="<div id='"+tblid+"' style='border:2px solid black; 
           border-radius:5px;'><table align='right'><tr><td><a href='javascript:void(0);' 
          id='"+rem+"' >Delete</a></td></tr></table>
        <table  align='center'>
        <tr><td>Section Title</td><td><input type='textbox' size='160' /></td></tr>
        <tr><td>Descrtiption</td><td><textarea rows='5' cols='162' 
        style='border-radius:5px;'></textarea><td></tr></table>
        <br>&nbsp &nbsp<input type='file' onchange='readURL(this);'/>
        <div id='"+imgdiv+"' style='border: 1px solid black'>
        <img id='"+imag+"' alt='your image' /></div></div>"; 

 $("#diva").append(m);

But, you don't always need to set these id's. You can always get the relative items using closest() ,find() methods. If you want to keep some data you want to send, Keep that in html 5 attributes.

Upvotes: 2

Related Questions