为动态增加节点添加class属性

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">就如之前文章里提到的那样，我的毕设是要做一个流程图。</span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">首先，我定义了画流程图的块。</span>

<div class="jtk-demo-main">
	<!-- demo -->
		<div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">
			<div class="window jtk-node terminal" id="nodeStart">Start</div>
			<div class="window jtk-node terminal" id="nodeEnd">End</div>
		</div>      
	</div>	

然后，定义了三个键question、action、output，每当单击后，会在canvas中添加相应的图形。

以question为例

function dispQuestionPrompt(){ // add question node
	var name = prompt("enter the action name");
	if (name) {
		var canvas = document.getElementById("canvas");
		var node = document.createElement("div");
		node.setAttribute("class","window jtk-node nodeDiamond");
		node.setAttribute("id","question");
		node.id += counter;
		counter++;
		var textNode = document.createElement("p");
		textNode.setAttribute("class","questionText");
		var	text = document.createTextNode(name);
		textNode.appendChild(text);
		node.appendChild(textNode);
		canvas.appendChild(node);
		}
	}
}

那么，问题来了：如果我想为动态添加的div添加class属性怎么办？

可以监听canvas，如果canvas树有插入新的dom div节点，为其添加class属性。

$(document).ready(function(){
	var canvas = $("#canvas");
	canvas.bind("DOMNodeInserted",function(e){
		$("#canvas div").addClass("jsplumb-connected");
	});
}); 

但是，这个DOMNodeInserted有缺陷，可以将最内层函数体改成alert("hi")试一试。 ：）

忽略这个缺陷，也能得到理想的结果。