使用.wrapinner而不是.show()

Question

新来的。我试图使用jquery wrapInner来显示用户的下一个选择，同时试图隐藏原始元素。这是我的护照。

一旦我点击背书单选按钮，它隐藏在中间的元素。取消按钮显示返回的元素。但是再次点击背书单选按钮，什么也没有发生。

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

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>

jquery:

$(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上不存在，所以为了向你的元素添加事件，在飞行中创建，你需要使用事件委托，所以变化:

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

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

参见::Updated jsFiddle

Answer 2

你可以试试: setup

$(function () {
$('#engr-choice').buttonset();
$('#cancel-action').button().click(function () {
      $('#engr-choice').html('');
      $('#endorse-edit').hide();
      $('#engr-choice').append('<input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/>        <label for="endorse">ENDORSEMENT</label>');
      $('#engr-choice input').prop('checked', false);
      return false;
   });
   $('#engr-action').on('click', '#endorse', function () {
      $('#engr-choice').html('');
      $('#engr-choice').wrapInner('<div id="endorse-edit"><a href="">Edit</a></div>');
      $('#endorse-edit').button();
   });
});

当你通过javascript/jQuery放置html元素时，事件的直接绑定对它们来说是不可用的，所以你需要通过event delegation来完成它，这是将事件委托给最接近的静态父节点，在你的情况下是#engr-action，或者你可以用$(document)来完成它，它总是可用来委托事件