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 に答える