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.
加载中,请稍侯......
精彩评论