li上的click事件无法正常运行 [英] click event on li its not work perfect
问题描述
这是我的xml文件:-
this is my xml file:-
<?xml-stylesheet href="b.xsl" type="text/xsl"?>
<root>
<child_1 entity_id = "1" value="Game" parent_id="0">
<child_2 entity_id="2" value="Activities" parent_id="1">
<child_3 entity_id="3" value="Physical1" parent_id="2">
<child_6 entity_id="6" value="Cricket" parent_id="3">
<child_7 entity_id="7" value="One Day" parent_id="6"/>
</child_6>
</child_3>
<child_4 entity_id="4" value="Test1" parent_id="1">
<child_8 entity_id="8" value="Test At Abc" parent_id="4"/>
</child_4>
<child_5 entity_id="5" value="Test2" parent_id="1">
<child_9 entity_id="9" value="Test At Xyz" parent_id="5"/>
</child_5>
</child_2>
</child_1>
</root>
这是我的xslt代码:-
this is my xslt code:-
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" omit-xml-declaration="yes"/>
<xsl:template match="*" mode="item">
<xsl:choose>
<xsl:when test="self::node()/child::*">
<li>
<xsl:value-of select="@value"/>
<xsl:apply-templates select="current()[*]"/>
</li>
</xsl:when>
<xsl:otherwise>
<li onclick="final()">
<xsl:value-of select="@value"/>
<xsl:apply-templates select="current()[*]"/>
</li>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template match="*/*/*">
<ul>
<xsl:apply-templates select="*[1] | node()[current()/ancestor::*[3]]" mode="item"/>
</ul>
</xsl:template>
</xsl:stylesheet>
在这里，我尝试从xml文件获取活动
如果最后一个li然后在其中设置一个函数作为属性类型，例如:-
here i try to get Activities from xml file
and if a last li then set there one function as a attribute type like :-
<li onclick ="final()">One Day</li>
它只设置了没有孩子的最后一个li ...
现在我创建一个JavaScript文件来获取xslt和html输出.:-
it only set last li which no have child...
now i am create one javascript file for getting xslt and html output.:-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title>Untitled Page</title>
<script>
function final(){
$('li:not(:has(*))').click(function(){
alert('click');
$('#result').text($(this).text());
});
}
</script>
<script>
var xml = loadXMLDoc("final.xml");
var xsl = loadXMLDoc("b.xsl");
function loadXMLDocOther(location) {
xhttp = new XMLHttpRequest();
xhttp.open("GET", location, false);
xhttp.send("");
return xhttp.responseXML;
}
function loadXMLDoc(dname) {
if (window.ActiveXObject) {
return loadXMLDocActiveX(dname);
}
else if (window.XMLHttpRequest) {
return loadXMLDocOther(dname);
}
}
function transformOther(xml, xsl, target, selected) {
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
if (selected) {
xsltProcessor.setParameter(null, "selected", selected);
}
var resultDocument = xsltProcessor.transformToFragment(xml, document);
target.innerHTML = "";
target.appendChild(resultDocument);
}
function displayResult() {
var targetElement = document.getElementById("load");
// code for IE
if (window.ActiveXObject) {
transformActiveX(xml, xsl, targetElement);
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation &&
document.implementation.createDocument) {
transformOther(xml, xsl, targetElement);
}
}
</script>
</head>
<body onload="displayResult()">
<div id="load">
</div>
<div id="result">result</div>
</body>
这是我的JavaScript代码，单击最后一个值，其值附加在< div id ="result">
this is my javascript code to click on last li its value append in <div id="result">
<script>
function final(){
$('li:not(:has(*))').click(function(){
alert('click');
$('#result').text($(this).text());
});
}
</script>
现在的问题是我在最后点击了它的工作，但是它的工作有点像for循环.当我尝试发出警报时遇到了这个问题.
now problem is i am click on last li its work but its work something like for loop. i got this problem when i try to one alert.
推荐答案
很难知道您要尝试什么.因此，这里首先说明您在做什么.您生成这样的html片段(通过xlst):
It is quite hard to know what you are trying to. Therefor here first an explanation what you are doing. You generate a html fragment like this (via xlst):
<ul>
<li>Physical1<ul>
<li>Cricket<ul>
<li onclick="final()">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
li元素上有一个没有孩子的onlclick处理程序( onclick ="final()).
There is one onlclick handlder (onclick="final()) at the li element without children.
function final(){
$('li:not(:has(*))').click(function(){
alert('click');
$('#result').text($(this).text());
});
}
首先单击一日"项目，然后调用final().最后一个函数将为所有没有子元素的li元素设置新的onclick处理程序.与onclick hanlder相同且唯一的元素已经结束了由于事件传播，下一次单击将调用新的处理程序，然后再进行最终处理.它将再次安装新的onclick处理程序.现在，元素上已经有了三个处理程序.每点击一次，添加一个.为此，您可以尝试使用 event.stopPropagation(); 或删除事件处理程序 attr('onclick'，'').off('click');
Firs click on "One Day" item calls final(). The final function than sets new onclick handler to all li elements with not children.
Which is the same and only element which has already an final as onclick hanlder
Because of event propagation the next click calls the new hanlder and afterward final. Which installs again a new onclick handler. Now wee have already three handler on the element. And each click add one more. To stop this can you try to use event.stopPropagation(); or to remove the event handler attr('onclick', '').off('click');
function final() {
var lis = $('li:not(:has(*))');
lis.attr('onclick', '').off('click');
$('li:not(:has(*))').click(function(event) {
$('#result').text($(this).text());
});
}
但是我更怀疑选择器是错误的 $('li:not(:has(*))').
其他一些评论:
-将事件处理程序设置为您的父< li> 元素也没有多大意义.因为li元素彼此包含(正确！)，所以在子元素上单击也会触发父元素的处理程序.
-因此(也许)您应该在li元素的内容(文本)周围添加元素.( li> span> Physical1/ ul> )
-比起您可以在onclick处理程序中添加span元素.
-如果只有最终"元素应触发事件，则无需设置任何新的点击功能.
But I more suspect that the selector is wrong $('li:not(:has(*))').
Some more comments:
- It would not make lot sense to set event handler to your parent <li> elements either. Because the li elements include each other (what is correct!) clicking on an child will also trigger the handler of the parent elements.
- Therefore (perhaps) you should add elements around the content (text) of the li elements.
(<li><span>Physical1</span><ul><li>...)
- Than you can add the onclick handler the span elements.
- If only the "final" elements should trigger an event, you do not need to set any new click functions.
function final(){
alert('click');
$('#result').text($(this).text());
}
这篇关于li上的click事件无法正常运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
