Question

我的<head>部分中有以下内容：

<script type="text/javascript">
        $(function(){
            $("h5").live("click", function(){
                alert($(this).tmplItem());
            });
        });
</script>

这不起作用。但是：

<script type="text/javascript">
        $(function(){
            $("h5").click(function(){
                alert($(this).tmplItem());
            });
        });
</script>

确实有效（除了添加事件监听器的live（）功能，因为我动态地拥有h5元素）。

知道为什么live（）调用不能用于h5。如果我调用$(".addButton").live(...)它确实有用（注意我的选择器是一个类，而不是一个html元素）。有人将live（）绑定到html元素有什么问题吗？

完整的HTML：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="lib/jquery-1.5.1.min.js">
    </script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js">
    </script>
    <script type="text/javascript" src="lib/jquery.nestedAccordion.js">
    </script>
    <style>
        h2, h3, h4, h5 {
            font-size: 1em;
            margin: 0px;
        }

        h2 {
            background-color: #f0f0f0
        }

        a {
            border: 1px solid #e0e0e0;
            color: #05b
        }

        a:hover, a:focus, a:active {
            border-color: #bcd;
            text-decoration: none;
            outline: 0 none
        }

        .accordion .outer {
            border: 5px solid #dadada;
            border-width: 0 1px 1px;
            background: #fff
        }

        a.trigger {
            padding-left: 20px;
            background-image: url(lib/plus.gif);
            background-repeat: no-repeat;
            background-position: 1px 50%;
            font-weight: 700
        }

        a.trigger.open {
            background-image: url(lib/minus.gif)
        }

        .last-child a.trigger {
            background-image: none;
            font-weight: normal
        }

        a.trigger {
            background-color: #f0f0f0
        }

        a.trigger.open {
            border-color: #dadada;
            background-color: #e7e7e7
        }

        a:hover.trigger.open, a:focus.trigger.open, a:active.trigger.open {
            border-color: #bcd
        }

        .accordion li {
            list-style-type: none
        }

        .accordion .inner {
            margin-bottom: 0;
            padding: .5em 20px 1em;
            position: relative;
            overflow: hidden
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $("h5").click(function(){
                alert($(this).tmplItem());
            });
        });
    </script>
</head>
<body id="container">
    <script id="procedureTemplate" type="text/x-jquery-tmpl">
        <li class = "procedure">
            <h4 class = "h"><a href="#" class="trigger" style="display:block">Procedure Name:<input id="procedureName" type="text" value="${name}"></a></h4>
            <div class ="outer" style="display: none;">
                <div class="inner">
                    <ul>
                        {{tmpl(children) "#procedureDefTemplate" }}
                    </ul>
                    <button class="addStepButton">
                        Add Step
                    </button>
                </div>
            </div>
        </li>
    </script>
    <script id="procedureDefTemplate" type="text/x-jquery-tmpl">
        <li class="step">
            <h5 class= "h"><a href="#" class = "trigger" style="display:block">Step Name:<input class="stepName" type="text" value="${name}"></a></h5>
            <div class ="outer" style="display: none;">
                <div class="inner">
                    <ul class="sortable">
                        {{tmpl(children) "#procedureDefTemplate" }}
                    </ul>
                    <textarea class = "stepDescription" rows="10" cols="100">
                        Step Description
                    </textarea>
                    <button class="addStepButton">
                        Add Step
                    </button>
                </div>
            </div>
        </li>
    </script>
    <ul id="procedureDefList" class="accordion">
    </ul>
    <script>
        function renderTemplate(container, template, data){
            $(container).empty();
            $(template).tmpl(data).appendTo(container);

        }

        var procedure = {
            name: "Procedure Name",
            children: [{
                name: "Step Name",
                children: []
            }]
        };

        //$("#procedureTemplate").tmpl(procedure).appendTo("#procedureDefList");
        $("#container").accordion({
            standardExpansible: true,
            head: 'h4, h5',
            el: '.h',
            next: 'div'
        });
        renderTemplate("#procedureDefList", "#procedureTemplate", procedure);

        $(".addStepButton").live('click', function(event){
            // alert("clicked: " + $(this).tmplItem());
            var item = $(this).tmplItem();
            item.data.name = "I got clicked";
            item.data.children.push({
                name: "I got added",
                children: []
            });
            item.update();
            renderTemplate("#procedureDefList", "#procedureTemplate", procedure);

        });

        $("#container").accordion();
    </script>
</body>
</html>

Answer 1

我认为除了h5 / jQuery实时问题之外你还会遇到其他问题。看看这个小提琴，它只是带有实时点击事件处理程序的h5s：

http://jsfiddle.net/Vjwfx/2/

运作良好。所以它必须是你要添加的其他东西。

HTML元素上的jQuery live（）

1 个答案: