javascript如何获取动态生成的元素的value值

2014-01-03

javascript怎么获取动态生成的元素的value值？如图，我想要点击节点的时候弹出节点值（此节点没有子节点）。请

javascript怎么获取动态生成的元素的value值？
javascript如何获取动态生成的元素的value值
如图，我想要点击节点的时候弹出节点值（此节点没有子节点）。请问各位大神怎么实现？其中html代码是动态生成的，部分代码如下：

var str = "";
var forTree = function(obj){
for(var i in obj){
var urlstr = "";
var links="#";
//var id=guid();
if(typeof obj[i] == "object"){//如果有子节点
//alert(i);
urlstr = "<div><span>"+ i +"</span><ul>";
}else{
urlstr = "<div><span><a href="+links+" value="+obj[i]+">"+ i +"</a></span><ul>";
}
str += urlstr;
if(obj[i] != null && typeof obj[i] == "object"){
//alert(obj[i]);
forTree(obj[i]);
}
str += "</ul></div>";
}
return str;
}

/*添加无级树*/
document.getElementById("menuTree").innerHTML = forTree(json);
/*树形菜单*/
var menuTree = function(){
//给有子对象的元素加[+-]
$("#menuTree ul").each(function(index, element) {
var ulContent = $(element).html();
var spanContent = $(element).siblings("span").html();
        if(ulContent){
$(element).siblings("span").html("[+] " + spanContent)
}
    });

$("#menuTree").find("div span").click(function(){
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanContent = spanStr.substr(3,spanStr.length);
if(ul.find("div").html() != null){
if(ul.css("display") == "none"){
ul.show(300);
$(this).html("[-] " + spanContent);
}else{
ul.hide(300);
$(this).html("[+] " + spanContent);
}
}
});

$("#menuTree").find("div span a").click(function(){
alert($('a').val());//我想要在这边弹出点击过后的节点值
alert('===============');
});
/*
$("a").each(function () {
    alert($(this).val() + ":" + $(this).text());
})
*/
}()

[解决办法]

document.getElementById("login").onclick = function(event){
event = event 
[解决办法]
 window.event;
var target = event.srcElement 
[解决办法]
 event.target,
    context = target.innerHTML;
console.log(context);
}

把这个id换成你需要点击的模块的父元素上面试试，没有做其他的处理，你如果需要判断是不是子元素只包含文字，不包含其他标签的话，就去target做判断就行了。

试试看。
[解决办法]
alert($('a').val())
替换如下
alert($(this).html())
[解决办法]
1,那来的val.
2,value='"+obj[i]+"'>"
3,是不是固定了节点层数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../lib/jquery/jquery-1.9.1.js"></script>
</head>
<body>
<div id='menuTree'></div>

<script>
var str = "";
var uid=0;
var forTree = function(obj){
for(var i in obj){
var urlstr = "";
var links="#";
//var id=guid();
if(typeof obj[i] == "object"){//如果有子节点
//alert(i);
urlstr = "<div><span>"+ i +"</span><ul>";
}else{
urlstr = "<div><span><a href="+links+" value='"+obj[i]+"' id='my" +uid +"' >"+ i +"</a></span><ul>";

++uid;
}
str += urlstr;
if(obj[i] != null && typeof obj[i] == "object"){
//alert(obj[i]);
forTree(obj[i]);
}
str += "</ul></div>";
}
return str;
}
var json = {
students:{
manager:{
name:'jo',
job:'wer'
},
student:{
t:'vvd',
tew:'vert'
}
}
};


var $a = forTree(json);
 
 document.getElementById("menuTree").innerHTML = $a;
/*树形菜单*/ 
 
var menuTree = function(){
//给有子对象的元素加[+-]
$("#menuTree ul").each(function(index, element) {
var ulContent = $(element).html();
var spanContent = $(element).siblings("span").html();
        if(ulContent){
$(element).siblings("span").html("[+] " + spanContent)
}
    });

$("#menuTree").find("div span").click(function(){
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanContent = spanStr.substr(3,spanStr.length);
if(ul.find("div").html() != null){
if(ul.css("display") == "none"){
ul.show(300);
$(this).html("[-] " + spanContent);
}else{
ul.hide(300);
$(this).html("[+] " + spanContent);
}
}
});
for(var i=0;i<uid;i++){
$('#my'+i).click(function(){
alert($(this).attr('value'));
});
}
/*  
$("#menuTree").find("div span a").click(function(){
alert($('a').val());//我想要在这边弹出点击过后的节点值
alert('===============');
});
*/
/*
$("a").each(function () {
    alert($(this).val() + ":" + $(this).text());
})
*/
}()

</script>
</body>
</html>

[解决办法]
alert($(this).attr("titlr"))

热点排行

JavaScript

javascript如何获取动态生成的元素的value值