javascript - 在 jQuery zIndex 中创建多个 div

Question

我试图创建一个在 $(document).ready() 事件上运行的函数，它支持创建一个新的 div。现在，当我想制作另一个具有相同 DOM 和类属性但位置不同的 div 时，问题就出在这里......

	
	//Updating z-index in css duo to more than 1 note
	var zIndex = 10000;
	function updateIndex(element){
		zIndex = zIndex+1; //Counter, '++' = +1
		$(element).css('z-index', zIndex);
		}
		
		
	$("div .makeNew").on("click", function(e) {
		updateIndex(this);
	});
	$(".note input textarea").on("click", function(e) {
		updateIndex(this);
	});


	
	function MakeNewNote(){
		zIndex = zIndex + 1;
		$('#content').css('z-index', zIndex).append("<div class="note" ><div id="controlsTop"><div class="deleteNote">X</div><div class="makeNew">+</div></div><input value="My Note" /><textarea value="I Have something to save" cols="20" name="S1" rows="1"></textarea><div id="controlsExtra hidden"><div class="controlBold"></div><div class="controlItalic"></div><div class="controlUnderlined"></div><div class="controlLeft"></div><div class="controlCenter"></div><div class="controlRight"></div><div class="controlBigFont"></div><div class="controlSmallFont"></div></div> <!-- controlsExtra --></div> <!-- note -->");
		$('.note').draggable();
	}
	
	function DeleteThisNote(){
		$('.note').remove();
	}
	
	$(document).ready(MakeNewNote); // Creates a note just at startup
	
	$(document).ready(function(){
		$('div .makeNew').on('click', MakeNewNote); // Creates a new note, enables button press inside the note 
		
		$('div .deleteNote').one('click', DeleteThisNote); // Removes current note
		
	});

/* CSS DOCUMENT */
/* Autor: Ismar Hadzic */
/* Description: Main style for Sticky Notes */
/* Licensed to WiKey inc. All rights reserverd 2015 */

.note {
	width: 200px; height: 200px;
	background:#FFFFCC;
	margin:15px;
	
	
}

.note .controlsTop {
	background:#FFFF66;
	padding-top:50px;
	margin-left:10px;
}

.note .controlsTop .deleteNote {
	width:10px;
	display:block;
	float:left;
	margin-left:5px;
	
}

.note .controlsTop .makeNew {
	width:10px;
	display:block;
	float:left;
	margin-left:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  // Should output here
  </div>

Answer 1

这里有两个更改应该可以解决您的问题:

首先，只初始化刚刚添加的div.note ...不是所有现有的:将 $('.note').draggable(); 更改为:

$('.note').last().draggable();

其次，删除相应的div.note:将 $('.note').remove(); 更改为:

$(this).closest('.note').remove();

更新

在DOM 就绪 事件之后创建的元素需要委托(delegate)事件 才能工作:

$('#content').on('click', 'div .makeNew', MakeNewNote);

$('#content').one('click', 'div .deleteNote', DeleteThisNote);