Javascript 点击li上的事件它不是完美的_Javascript_Xml_Function_Xslt

Javascript 点击li上的事件它不是完美的

javascript xml function xslt

Javascript 点击li上的事件它不是完美的,javascript,xml,function,xslt,Javascript,Xml,Function,Xslt,这是我的xml文件：- <?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="Phys

这是我的xml文件：-

<?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代码：-

<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设置了一个函数作为属性类型，如：-

<li onclick ="final()">One Day</li>

一天它只设置了最后一个没有孩子的li…
现在，我正在创建一个javascript文件，用于获取xslt和html输出：-

<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>


无标题页
函数final（）{
$（'li:not（：has（*）'）。单击（function（）{
警报（“点击”）；
$（'#result'）.text（$（this.text（））；
});
}
var xml=loadXMLDoc（“final.xml”）；
var xsl=loadXMLDoc（“b.xsl”）；
函数loadXMLDocOther（位置）{
xhttp=newXMLHttpRequest（）；
xhttp.open（“GET”，位置，false）；
xhttp.send（“”）；
返回xhttp.responseXML；
}
函数loadXMLDoc（dname）{
if（window.ActiveXObject）{
返回加载xmldocactivex（dname）；
}
else if（window.XMLHttpRequest）{
返回载荷xmldocother（dname）；
}
}        
函数transformOther（xml、xsl、target、selected）{
var xsltProcessor=new xsltProcessor（）；
导入样式表（xsl）；
如果（选定）{
xsltProcessor.setParameter（null，“已选择”，已选择）；
}
var resultDocument=xsltProcessor.transformToFragment（xml，文档）；
target.innerHTML=“”；
target.appendChild（resultDocument）；
}
函数displayResult（）{
var targetElement=document.getElementById（“加载”）；
//IE代码
if（window.ActiveXObject）{
transformActiveX（xml、xsl、targetElement）；
}
//Mozilla、Firefox、Opera等的代码。
else if（文件、实施和
document.implementation.createDocument）{
transformOther（xml、xsl、targetElement）；
}
}
结果

这是我的javascript代码，用于在

<script>
        function final(){
            $('li:not(:has(*))').click(function(){
            alert('click');
            $('#result').text($(this).text());
            });
            }
        </script>


函数final（）{
$（'li:not（：has（*）'）。单击（function（）{
警报（“点击”）；
$（'#result'）.text（$（this.text（））；
});
}

现在的问题是我在点击最后一个li，它的工作，但它的工作类似于for循环。当我尝试发出一个警报时，遇到了这个问题。

很难知道您正在尝试发出什么警报。因此，这里首先解释一下你在做什么。生成如下html片段（通过xlst）：

首先单击“一天”项目调用final（）。最后一个函数将新的onclick处理程序设置为所有不包含子元素的li元素。 这是与onclick hanlder相同且唯一一个已经有一个final的元素 由于事件传播，下一次单击调用新的hanlder和final。它将再次安装一个新的onclick处理程序。现在我们在元素上已经有了三个处理程序。然后每次单击添加一个。要停止此操作，可以尝试使用

event.stopPropagation（）或删除事件处理程序attr（'onclick'，''）。关闭（'click'）
但是我更怀疑选择器是错误的$（'li:not（：has（*）））


更多评论：

-将事件处理程序设置为父
元素也没有多大意义。因为li元素彼此包含（什么是正确的！），单击子元素也会触发父元素的处理程序。

-因此（也许）您应该在li元素的内容（文本）周围添加元素。
（物理1..
）

-然后可以将onclick处理程序添加到span元素中。

-如果只有“final”元素触发事件，则不需要设置任何新的单击函数
function final(){
        alert('click');
        $('#result').text($(this).text());
        } 

@杰克：你有更多关于你是什么的信息吗？
function final(){
        $('li:not(:has(*))').click(function(){
        alert('click');
        $('#result').text($(this).text());
        });
        } 

function final() {
    var lis = $('li:not(:has(*))');
    lis.attr('onclick', '').off('click');
        $('li:not(:has(*))').click(function(event) {
              $('#result').text($(this).text());
        });
    }

function final(){
        alert('click');
        $('#result').text($(this).text());
        }