3

新手在这里。我正在尝试使用 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>

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;
});
});
4

2 回答 2

1

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

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

至

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

请参阅::更新的 jsFiddle

于 2013-06-21T06:20:14.450 回答
1

你可以试试这个：小提琴设置

$(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)总是可用于委派事件。

于 2013-06-21T06:27:35.940 回答