CODEWITHSUNDEEP
javascriptjqueryhtml
JonaNathali
JonaNathali

Reputation: 177

Create multiple DIVS on the fly

I'm trying to create multiple DIVs when onClick() is triggered.

I've used an increment value to create multiple DIVs. But this doesn't fully work. See comments in code. (works perfect when a single DIV is used)

var tDV = 0;
$("#aTx").click(function() {
    var diagonalScl;
    var txSiz;
    tDV++;
    $("#ltn").append('<div id="aTextDV"+tDV class="ui-widget-content"></div>'); //WORKS
    $("#aTextDV"+tDV).append('<div class="txmoPos" id="mvTx" onclick="mTxt(this.id)"><img src="img/markers/img3.png"/></div>'); // DOSEN'T WORK (no image, onClick does not work)
    $("#aTextDV"+tDV).append('<div class="txdlPos" id="dleTx" onclick="dTxt(this.id)"><img src="img/markers/img1.png"/></div>');// DOSEN'T WORK (no image, onClick does not work)
    $("#aTextDV"+tDV).append('<div class="txrsPos" id="rzTx" onclick="rTxt(this.id)"><img src="img/markers/img2.png"/></div>');// DOSEN'T WORK (no image, onClick does not work)
    $("#aTextDV"+tDV).append('<textarea rows="3" id="aText">Type Here</textarea>');
    alert("#aTextDV"+tDV)// DOSEN'T WORK (no textarea)

Upvotes: 0

Views: 146

Answers (2)

Ivan
Ivan

Reputation: 10372

$("#ltn").append('<div id="aTextDV"+tDV class="ui-widget-content"></div>');

is the line with the bug. It should be:

$("#ltn").append('<div id="aTextDV"'+tDV + 'class="ui-widget-content"></div>');

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

When you are creating your DOM element, you are not concatenating the string.

This line :

'<div id="aTextDV"+tDV class="ui-widget-content"></div>'

Should be :

'<div id="aTextDV'+tDV+'" class="ui-widget-content"></div>'

Bonus tip, you can chaine Query method for better performance : 

$("#aTextDV"+tDV)
.append('<div class="txmoPos" id="mvTx" onclick="mTxt(this.id)"><img src="img/markers/img3.png"/></div>'); 
.append('<div class="txdlPos" id="dleTx" onclick="dTxt(this.id)"><img src="img/markers/img1.png"/></div>');
.append('<div class="txrsPos" id="rzTx" onclick="rTxt(this.id)"><img src="img/markers/img2.png"/></div>');
.append('<textarea rows="3" id="aText">Type Here</textarea>');

Upvotes: 3

Related Questions