javascript - click event on li its not work perfect -
this 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 @ abc" parent_id="4"/> </child_4> <child_5 entity_id="5" value="test2" parent_id="1"> <child_9 entity_id="9" value="test @ xyz" parent_id="5"/> </child_5> </child_2> </child_1> </root> this 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> here try activities xml file
, if last li set there 1 function attribute type :-
<li onclick ="final()">one day</li> it set last li no have child...
create 1 javascript file getting xslt , 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 ie if (window.activexobject) { transformactivex(xml, xsl, targetelement); } // code 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> this javascript code click on last li value append in <div id="result">
<script> function final(){ $('li:not(:has(*))').click(function(){ alert('click'); $('#result').text($(this).text()); }); } </script> now problem click on last li work work loop. got problem when try 1 alert.
it quite hard know trying to. therefor here first explanation doing. generate html fragment (via xlst):
<ul> <li>physical1<ul> <li>cricket<ul> <li onclick="final()">one day</li> </ul> </li> </ul> </li> </ul> there 1 onlclick handlder (onclick="final()) @ li element without children.
function final(){ $('li:not(:has(*))').click(function(){ alert('click'); $('#result').text($(this).text()); }); } firs click on "one day" item calls final(). final function sets new onclick handler li elements not children. which same , element has final onclick hanlder because of event propagation next click calls new hanlder , afterward final. installs again new onclick handler. wee have 3 handler on element. , each click add 1 more. stop can try use event.stoppropagation(); or remove 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()); }); } but more suspect selector wrong $('li:not(:has(*))').
more comments:
- not make lot sense set event handler parent <li> elements either. because li elements include each other (what correct!) clicking on child trigger handler of parent elements.
- therefore (perhaps) should add elements around content (text) of li elements. (<li><span>physical1</span><ul><li>...)
- can add onclick handler span elements.
- if "final" elements should trigger event, not need set new click functions.
function final(){ alert('click'); $('#result').text($(this).text()); } 