Question

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

一旦我点击了支持单选按钮，它就会隐藏其间的元素。取消按钮显示元素。但是再次单击endorse单选按钮没有任何反应。

对此的任何帮助都将不胜感激！

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

您可以尝试：Fiddle 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)来执行此操作，该{{1}}始终可用于委派事件。

使用.wrapInner而不是.show（）

2 个答案: