jQuery .live 和parent() 问题
我有很多这样的代码片段:
<li>
<label>
<a title="Cadeo">
<span class="container">
<img class="shadow" src="../public/4cf54b32bd723_small.jpg" alt="" />
</span>
</a>
<input name="Trailer" type="radio" value="1" />
<span class="change">Seleziona</span>
</label>
</li>
感谢这个 jQuery 代码,当单击标签(包含所有标签)时,“Seleziona”文本被替换为按钮标签:
$('label').click(function(){
$('label').children('span.change').html('Seleziona'); // reset the others li's text
$(this).children('span.change').html('<button type="button" class="small middle"><img src="../images/vota-small.png" alt="" /></button>')
})
现在是棘手的部分:我试图捕获的值无线电输入标签,但这不起作用(我正在使用 .live 函数,因为该按钮是在运行时创建的)
$('button').live('click', function(){
alert($(this).parent().siblings('input').val());
})
我哪里错了?我总是得到“未定义”...... 提前感谢您的回答
如果有帮助,这里有一个实时版本: http://jsfiddle.net/H4Gsq/< /a>
I have many of this snippet code:
<li>
<label>
<a title="Cadeo">
<span class="container">
<img class="shadow" src="../public/4cf54b32bd723_small.jpg" alt="" />
</span>
</a>
<input name="Trailer" type="radio" value="1" />
<span class="change">Seleziona</span>
</label>
</li>
Thanks to this jQuery code, when clicking on tag (that contains all) the "Seleziona" text is replaced with a button tag:
$('label').click(function(){
$('label').children('span.change').html('Seleziona'); // reset the others li's text
$(this).children('span.change').html('<button type="button" class="small middle"><img src="../images/vota-small.png" alt="" /></button>')
})
Now comes the tricky part: I'm trying to catch the value of the radio input tag, but this doesn't work (I am using the .live function since the button is created at runtime)
$('button').live('click', function(){
alert($(this).parent().siblings('input').val());
})
Where am I wrong? I keep getting "undefined"...
Thanks in advance for the answers
If it can help, here is a live version: http://jsfiddle.net/H4Gsq/
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
试试这个 -
实际上,当您当时单击按钮时,单击甚至会传播到标签,因此标签单击功能也会被触发。这种效应称为冒泡。
为了步进事件冒泡,我使用了
e.stopPropagation()
Try this -
Actually when you click button at that time that click would even propogate to label and hence labels click function will also be triggered. This effect is known as bubbling.
To step event bubbling i have used
e.stopPropagation()
首先,为什么要使用其次,当您单击按钮时,两个事件处理程序都会触发。parent()
?输入是跨度的同级,而不是其父级的同级。stopPropagation
没有任何帮助,因为live
本身依赖于事件冒泡;此外,实时事件处理程序在正常事件处理程序之后触发。您应该检查event.target
,如果它是一个按钮,请跳过标签的点击处理程序。第一部分忘记了,我没有仔细阅读代码。无论如何,这是一个更正的版本: http://jsfiddle.net/H4Gsq/1/
First, why theSecond, both event handlers will fire when you click the button.parent()
? The input is the sibling of the span, not the sibling of its parent.stopPropagation
is no help aslive
itself relies on event bubbling; also, live event handlers fire after normal event handlers. You should checkevent.target
and if it is a button, skip the click handler of the label.Forget the first part, I didn't read the code carefully. Anyway, here is a corrected version: http://jsfiddle.net/H4Gsq/1/
为什么不触发自定义触发器,然后相应地操作它......
why not fire a custom trigger and then manipulate it accordingly...