javascript - 使用 .wrapInner 而不是 .show()

Question

这里是新手。我正在尝试使用 jquery wrapInner 在尝试隐藏原始元素时为用户显示下一个选择。这是我的 jsfiddle .

单击背书单选按钮后，它会隐藏中间的元素。取消按钮显示元素。但是再次点击认可单选按钮没有任何反应。

如有任何帮助，我们将不胜感激!

html:

<div id="engr-action" >
  <div id="engr-choice">
    <input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/>
      <label for="endorse">ENDORSEMENT</label>
    <input id="encode" class="engr-choice" type="radio" name="encoder-pick"/>
      <label for="encode">ENCODE</label>      
  </div>
  <button id="cancel-action">Cancel</button>
</div>

j查询:

$(function(){
$('#engr-choice').buttonset();

$('#cancel-action')
  .button()
  .click(function() { 
    $('#engr-choice').html('');
    $('#endorse-edit').hide();

    $('#engr-choice').wrapInner('<input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/><label for="endorse">ENDORSEMENT</label>');                

    $('#engr-choice input').removeAttr('checked');       
    $('#engr-choice').buttonset('refresh');       

    return false;
  });

$('#endorse').click(function(){     
    $('#engr-choice').html('');
    $('#engr-choice').wrapInner('<div id="endorse-edit"><a href="">Edit</a></div>');
    $('#endorse-edit').button();        

    return false;
});
});

Answer 1

由于您的元素是“动态”生成的，通过 javascript，您的 $('#endorse').click(.. 事件不会起作用，因为该元素在 DOM 上不存在，所以为了向动态创建的元素添加事件，您需要使用事件委托(delegate)，所以改变:

$('#endorse').click(function(){     
..

到

$(document).on('click', '#endorse',function(){
...

参见::Updated jsFiddle