jQuery live() on HTML Element_问答_开发者_运维开发者技术经验分享

I've got the following in my <head> section:

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

That isn't working. However:

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

does work (except the live() functionality of adding the event listener as I dynamically had h5 elements).

Any idea why the live() call isn't working on h5. If I call $(".addButton").live(...) it does work (notice my selector is a class, not an html element). Anybody have any problem binding live() to an html element?

Full 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开发者_JAVA百科.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>

I think you're hitting something other than h5 / jQuery live problems. Look at this fiddle, it's just h5s with a live click event handler:

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

Works well. So it must be something else you're adding.