jquery 函数 .prop() 无法正常工作

Question

我正在使用 jquery 函数 .prop() 从一组由 ajax 返回的无线电输入中检查特定的无线电输入。它检查了所需的输入片刻，然后再次未选中。
我创建了一个按钮，单击该按钮时调用 ajax 函数，然后 ajax 返回放置在 <ul> 标记中的单选输入组列表。

<ul> 标记的 HTML 代码。

<ul id= "list_option">
     // here ajax response will come
</ul>

按钮代码：

<button class="btn btn-primary get_option" type="button" data-selected_option="2">click</button>

按钮调用的函数：

$(document).on('click', '.get_option', function(){

      var checked_answer_id = $(this).attr('data-selected_option');
      get_opt();
      $('#option_id_'+checked_answer_id).prop('checked',true);
   });

注意：我使用 attr() 函数而不是 data('selected_option') 因为 attr 返回的值由于某种原因 data 函数不是。
ajax 函数：

function get_opt()
    {
        $.ajax({
            url:"ajax_action.php",
            method:"POST",
            dataType: 'JSON',
            data:{action:'get_option'},
            success:function(response)
            { $('#list_option').html(response);}
        })
    }

从 ajax_action.php 页面返回的 HTML 代码：

   $output=' 
     <li class="list-group-item border rounded border-success answer-item-list">
      <div class="form-check">
       <input class="form-check-input answer_option" type="radio" id="option_id_1" name="opt_grp" value="1">
       <label class="form-check-label" for="option_id_1" > OPTION 1</label>
      </div>
     </li>
     <li class="list-group-item border rounded border-success answer-item-list">
      <div class="form-check">
       <input class="form-check-input answer_option" type="radio" id="option_id_2" name="opt_grp" value="2">
       <label class="form-check-label" for="option_id_2"> OPTION 2</label>
      </div>
     </li>
    ';
  echo $output;

上面的所有代码都可以正常工作，除了 prop 函数检查了所需的无线电输入，在这种情况下是选项 2，然后它被取消选中。我不知道我做错了什么。

Answer 1

这就是这些天酷孩子们的做法；）

对调用$.ajax的函数使用async/await，等待ajax调用完成，然后将结果返回给调用函数。

我们使用.then()，因此我们不必同时确定文档就绪匿名函数异步并等待get_opt()。通过使用 then ，它将等待 get_opt 完成。

然后，您可以在 .then() 方法内对 result 执行操作，并希望将 prop 设置为选中您的单选按钮，以后不会被覆盖。

$(document).on('click', '.get_option', function(){

  var checked_answer_id = $(this).attr('data-selected_option');
  get_opt().then((result) => {
       $('#option_id_'+checked_answer_id).prop('checked',true); 
       $('#list_option').html(result);
  });
 });

---

async function get_opt() {

   let result;
   try {
      result = await $.ajax({
        url:"ajax_action.php",
        method:"POST",
        dataType: 'JSON',
        data:{action:'get_option'},
      });
      return result;
    } catch (error) {
      console.log(error);
    }

}