Question

我有很多代码段：

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

Answer 1

试试这个 -

$('button').live('click', function(e){
  e.stopPropagation();
  alert($(this).parent().prev('input').val());

})

实际上当你点击按钮时，点击甚至会传播到标签，因此也会触发标签点击功能。这种效应被称为起泡。为了使事件冒泡，我使用了e.stopPropagation()

Answer 2

为什么不触发自定义触发器然后相应地操作它...

$("input[type='radio']").trigger("checked");

$("input[type='radio']").live('checked',function(){

alert($(this).parent().prev('input').val());

})

Answer 3

~~首先，为什么parent()？输入是span的兄弟，而不是其父级的兄弟。~~其次，当您单击按钮时，两个事件处理程序都将触发。 stopPropagation没有任何帮助，因为live本身依赖于事件冒泡;此外，实时事件处理程序在正常事件处理程序之后触发。您应该检查event.target，如果是按钮，请跳过标签的点击处理程序。

忘记第一部分，我没有仔细阅读代码。无论如何，这是一个更正版本：http://jsfiddle.net/H4Gsq/1/

jQuery .live和parent（）问题

3 个答案: