4

ユーザーがクリックできるラジオ ボタンのオフィス リストがあり、div にオフィス情報が表示されます。ユーザーがラジオ ボタンのリストにオフィスを追加するオプションがあります。ユーザーがフォームに入力すると、ラジオ ボタンがリストに正常に追加されますが、クリック機能がトリガーされないため、div 内のオフィス情報が更新されません。他のラジオ ボタンをクリックすると、動的に追加されたラジオ ボタンをクリックしたときに div が更新されます。.delegate()最初のページ読み込み後にラジオボタンが追加されて以来、クリック機能を使用しようとしましたが、成功しませんでした。

どんな助けでも大歓迎です!!!

ラジオ ボタンの追加方法:

$(document).on("click", "#addOffice", function() {
  var officeadd = $('#officeAddForm').serializeArray();
  //console.log(officeadd);
  $.ajax({
      url:      'officeadd.php',
      type:         "POST",
      data:         officeadd,
      dataType: "json", 
      success: function(data) {
              console.log(data);
              if(data.errorCode[0] === 'ok') {
                console.log('NO ERRORS');
                console.log(data.officeInfo[1]);
                $('#officecontrolgroup > div.ui-controlgroup-controls').append('<input type="radio" name="office" id="office' + data.officeInfo[0] + '" value="' + data.officeInfo[0] + '"/><label for="office' + data.officeInfo[0] + '">' + data.officeInfo[1] + '</label>').trigger('create');
                $('#officecontrolgroup').controlgroup("refresh");
                $("#deliveryInstructions").trigger("updatelayout");
                $('#officeAddForm').trigger('reset');
                var $office = '#office'+ data.officeInfo[0];
                console.log($office);
                $(function(){

                    $($office).prop('checked', true).checkboxradio("refresh");
                    $($office).trigger('click');
                })

      }
  });
  return false;
});

office という名前のラジオ ボタンのクリック機能:

$('input[name=office]:radio').on('click', function() {
var $value = $(this).val();
console.log($value);
$.ajax({
    url:        'officeget.php',
    type:       "POST",
    data:       {q: $value},
    dataType:   "json", 
    success: function(data) {
            console.log(data.officeName);
            $('#docoffice').hide();
            $('#docoffice').html(data.officeName).fadeIn(1000);
            $('#docaddress').hide();
            $('#docaddress').html(data.officeAddress).fadeIn(1000);
            $('#docsuite').hide();
            $('#docsuite').html('Suite '+data.officeSuite).fadeIn(1000);
            $('#doccitystate').hide();
            $('#doccitystate').html(data.officeCity+', '+data.officeState+' '+data.officePostalCode).fadeIn(1000);
            $('#docphone').hide();
            $('#docphone').html(data.officeTelephone).fadeIn(1000);
    }
});
});

HTML

<form id="officeChoice" class="submition">

<fieldset id="officecontrolgroup" class="ui-corner-all ui-controlgroup ui-      controlgroup-vertical ui-mini" style="margin-top:0px; width:100%;" data- mini="true" data-role="controlgroup" aria-disabled="false" data-disabled="false" data-shadow="false" data-corners="true" data-exclude-invisible="true" data-  type="vertical" data-init-selector=":jqmData(role='controlgroup')">
<div class="ui-controlgroup-controls">
<div class="ui-radio">
<div class="ui-radio">
<div class="ui-radio">

</div>
</fieldset>
</form>

解決策:clickこれを機能させるには、' ' を ' change' イベント に変更する必要があります。

$('#officeChoice').on('change','input[name=office]:radio', function() {...

フィドルのデモ

4

1 に答える 1

7

イベントを委任する必要があります

$(container).on('click', 'input[name=office]:radio', function() {

イベントがバインドされた時点でラジオボタンが存在しなかったためです。

containerradio 要素が存在する DOM の最も近い祖先要素です。

于 2013-06-05T23:38:33.000 に答える