对 li 元素设置 onClick 函数，函数中出现 “underfined” 的问题

对 li 元素设置 onClick 函数，函数中出现 “underfined” 的问题

问题复现

• 在使用 django 的时候，需要根据对 li 元素的点击获得对应的item，但是这个item 的 id 是设置在其父元素 ul 上的，所以需要通过$(this).parent().attr(“id”) 来获得这个 id. 结构如下：

	
	<ul id=2>
		<li onclick=functionName()></li>
		<li onclick=functionName2()></li>
	</ul>
	

• 然后通过 ajax 传送包含 id 等信息到服务器进行相应操作.

问题解决

• 通过 chrome 中的Dev Tool 发现获得的中间对象是 window 类型， 而不是需要的 li 或者 ul 类型, 所以对其进行调用 attr(“id”) 自然也就返回 underfined.
• 所以google 一下 " $(this) return window" 可以找到这一条记录
• 大概意思就是说在 js 的函数调用中，没有传递引用对象给这个函数，所以这个函数就默认引用为 window 对象，所以调用$(this) 自然就返回这个对象. 所以要做的就是在onClick 函数的参数列表加上对应的引用(定义和调用处都要加上)即可, 如下：

	onclick="functionName(this)"
	function functionName(item){ 
		event_id = item.parentNode.getAttribute("id");
		// do something
	};

• 需要额外注意的一点是，在定义出由于我们操纵的是 DOM 对象，所以不能够使用 jquery 的对象，所以要达到原来$(this).parent().attr(“id”) 的效果，需要将其换成DOM 中的函数，即 item.parentNode.getAttribute(“id”), 这个 item 是函数列表的参数，即之前提到的新添加的引用。

总结

• 感觉自己还是太弱了，主要还是 js 基础不够，都是一边用一边学的。有空的需要补一下相关的基础了。