我有一个Web应用程序，允许用户复制作为元素的框。但是，我有一个小问题。每当我单击一个按钮来复制框时，当应该只有1个时会出现多个框。框。如何解决此问题？
JQUERY：
function getElem(element) {
var name = $(element).attr('name');
console.log(name);
var dupBtn = document.getElementById('duplicateBox');
$(dupBtn).on('click', function () {
var check = document.getElementById("box0");
if (check === null || $(check).attr('name') == null) {
$(document.getElementById('errorMessage')).text("Please create a box and label it first");
document.getElementById('errorMessage').style.display = 'block';
alert("Please create a box and label it first");
}
else{
document.getElementById('errorMessage').style.display = 'none';
document.getElementById("save").style.pointerEvents = ("auto");
var div = document.createElement('div');
$(div).attr('id', 'box' + i);
$(div).attr('class', 'box');
$(div).attr('name', name);
div.style.width = element.style.width;
div.style.height = element.style.height;
div.style.border = element.style.border;
div.style.background = element.style.background;
$(div).draggable({
containment: "#canvas"
});
$(div).resizable({
handles: 'ne, se, sw, nw'
});
$(div).addClass("Copyof" + name);
i++;
$('#boxContain').append(div);
if (div.getAttribute('name') == null) {
} else {
var p = document.createElement("p");
$(p).text(name);
$(p).attr('id', "Copyof" + name);
$(p).attr('class', name);
$(p).addClass('lbl');
$(p).addClass($(div).attr('id'));
$("#existingLbl").append(p);
}
}
});
}
$(div).attr('onclick', 'getElem(this); ');
HTML：
<form name="imageLblForm" method="post" id="imageLblForm" enctype="multipart/form-data" runat="server" action="#">
<a href="#" id="signOut" onclick="signOut();">Sign out</a>
<h4 id="errorMessage"></h4>
<section name="nav" class="nav">
<ul>
<li><input type="file" id="my_file" name="file1" onchange="" accept=".bmp,.jpg, .png, image/jpg, image/bmp, image/png" style="display:none" multiple /><input type="button" id="openBtn" class="openBtn" value="Open" onclick="document.getElementById('my_file').click();" /></li>
<li><input type="submit" value="Save" id="save" onclick="document.getElementById('hiddenLink').click(); return false; "><a onclick="document.execCommand('SaveAs','true','<?php if(isset($_FILES['file1'])){echo pathinfo($_FILES['file1']['name'], PATHINFO_FILENAME);}?>.xml');" id="hiddenLink">Save</a></li>
<li>
<hr />
</li>
<li><button onclick="createBox(); return false;" id="createBoxBtn">Create Rect Box</button></li>
<li><button onclick="addBox(); return false;" id="duplicateBox">Duplicate Rect Box</button></li>
<li><button onclick="deleteDiv(); return false;" id="deleteBox">Delete Rect Box</button></li>
<li><button id="zoomInBtn" onclick="return false;">Zoom In</button></li>
<li><button id="zoomOutBtn" onclick="return false;">Zoom Out</button></li>
</ul>
</section>
<section name="canvas" class="canvas" id="canvas">
<div id="boxContain"></div>
<div class="imageContainer" id="imageContainer">
</div>
</section>
<section id="rightPanel" name="rightPanel" class="rightPanel">
<div class="label" name="label" id="label">
<p id="sectionLbl">Box Labels</p>
<button id="editLblBtn" class="lbls" onclick="return false;">Change Label</button>
<hr />
<div id="existingLbl"></div>
<div id="lblList" class="modal">
<div class="modal-content">
<select id="labels">
<option disabled selected value> -- select a label -- </option>
<?php
$file_lines = file('lbls/predefined_classes.txt');
foreach($file_lines as $line){
?>
<option value="<?php echo $line; ?>">
<?php echo $line; ?>
</option>
<?php
}
?>
</select>
<span class="close">✗</span>
<input type="button" onclick="return false;" id="submitLbl" value="Select" />
<input type="button" onclick="return false;" id="editLbl" value="Edit" />
</div>
</div>
</div>
<div class="files" name="files" id="files">
<p>File List</p>
</div>
</section>
</form>
我已尝试：
$('#boxContain').on('click', function (event) {
var dupBtn = document.getElementById('duplicateBox');
var selBox = event.target;
var name = $(selBox).attr('name');
$(dupBtn).on('click', function () {
var check = document.getElementById("box0");
if (check === null || $(check).attr('name') == null) {
$(document.getElementById('errorMessage')).text("Please create a box and label it first");
document.getElementById('errorMessage').style.display = 'block';
alert("Please create a box and label it first");
} else {
document.getElementById('errorMessage').style.display = 'none';
document.getElementById("save").style.pointerEvents = ("auto");
var div = document.createElement('div');
$(div).attr('id', 'box' + i);
$(div).attr('class', 'box');
$(div).attr('name', name);
div.style.width = event.target.style.width;
div.style.height = event.target.style.height;
div.style.border = event.target.style.border;
div.style.background = event.target.style.background;
$(div).draggable({
containment: "#canvas"
});
$(div).resizable({
handles: 'ne, se, sw, nw'
});
$(div).addClass("Copyof" + name);
i++;
$('#boxContain').append(div);
if (div.getAttribute('name') == null) {
} else {
var p = document.createElement("p");
$(p).text(name);
$(p).attr('id', "Copyof" + name);
$(p).attr('class', name);
$(p).addClass('lbl');
$(p).addClass($(div).attr('id'));
$("#existingLbl").append(p);
}
}
}); //end of dupBtn onclick
}); //end of boxContain onclick
代码是这样的。当用户创建一个框时，它将具有一个onclick属性，该属性调用getElem（）函数。在此函数中，当用户单击“复制框”按钮时，所选框将被复制，并且只有一个框应该会出现。但是我不断出现多个框。请帮助我。谢谢。