获取动态添加的节点的ID

爱被打了一巴掌 2022-06-08 05:15 159阅读 0赞

**目的**：在网页设计的过程中，有时候我们需要获取动态添加的节点的id，从而设置相应的属性或者事件。

**方法**：**可以给动态添加的内容加上一个不显示的input，将其value设置为后台传过来的数据的某一个变量值。**

如：'<input type="hidden" value="'+activity\_id+'" name="activity\_id" />'

var li_str ='<li class="panel_content" id="activity'+activity_id+'">'+
                	'<input type="hidden" value="'+activity_id+'" name="activity_id" />'+
    	            '<div class="content">'+
    	                '<p class="p1"><strong >'+title+'</strong></p>'+
    	                '<a id="entry'+activity_id+'" class="entry" οnclick="handleEntryEvent(this)">进入</a>'+
    	            '</div>'+
    	            '<div class="content">'+
    	                '<p id="leftStatus'+activity_id+'" class="p1">'+info+'</p>'+
    	                '<a id="'+activity_id+'" class="entry" οnclick="handleEndedActivity(this)">'+activity_status+'</a>'+
    	            '</div>'+
    	            '<div class="content content1">'+
    	                '<p class="p1 font1">'+create_time+'</p>'+
    	                '<a class="entry" οnclick="set(this);" id="set'+activity_id+'">设置</a>'+
    	            '</div>'+
    	        '</li>';
    $("#ul_panel_content").append(li_str)

activity\_id是从后台发回来的数据，值形式为“1”或者“2”等等。

现在我们用：<input type="hidden" value="'+activity\_id+'" name="activity\_id" />,

**目的：现在想要获取到这个节点的id，对其定义事件**

'<a id="entry'+activity_id+'" class="entry" οnclick="handleEntryEvent(this)">进入</a>'

**思路**：通过获取到input的value，从而得到 activity\_id，进而得到节点的id

**函数 **handleEntryEvent(this)的js代码如下：这里的this是节点本身

// 处理”进入“按钮事件
    	handleEntryEvent = function(node){
    		var parents = node.parentNode.parentNode;
    		var child = parents.children;
    		console.log(child);
    		var input_obj = child[0];
    		var activ_id = input_obj.value;  //注意这里写的是js，不是在jquery框架写的，所以用Input_obj.val(),提示，input_obj.val is not a function
    		var url =  globalConfig.pre_api_url + "/wall/index.php?activity_id=" + activ_id;
    		var entry_obj = $("#entry"+activ_id);
    		entry_obj.attr("target","_blank");
    		entry_obj.attr("href",url)
    	}

通过 activ\_id = input\_obj.value 就可以得到activity\_id的值了，从而得到点击节点的id：entry\_obj = $("\#entry"+activ\_id)