Question

我在尝试触发onClick（）时尝试创建多个DIV。

我使用了增量值来创建多个DIV。但这并不完全有效。请参阅代码中的注释。（使用单个DIV时效果很好）

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)

Answer 1

在创建DOM元素时，不要连接字符串。

这一行：

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

应该是：

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

奖金提示，您可以链接查询方法以获得更好的性能：

$("#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>');

Answer 2

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

是与bug有关的行。它应该是：

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

动态创建多个DIVS

2 个答案: