Функция jquery .prop() не работает должным образом


Я использую функцию jquery .prop() для проверки определенного радиовхода из группы радиовходов, которые возвращаются ajax. он на мгновение проверил нужный ввод, а затем снова не проверил.
Я создал кнопку, которая при нажатии вызывает функцию для ajax, и ajax возвращает список групп ввода радио, который помещен в тег <ul>.

HTML-код для тега <ul>.

<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 возвращал значение, которое по какой-то причине не является функцией данных.
функция для ajax:

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

Возврат HTML-кода со страницы ajax_action.php:

   $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, а затем он не проверяется. Я не знаю, что я делаю неправильно.


jquery ajax prop radiobuttonlist
person akash yadav    schedule 10.05.2020    source источник
comment
Я не могу воспроизвести вашу проблему: jsfiddle.net/teddyrised/a09j67d2. Вы уверены, что HTML-код, возвращаемый AJAX, анализируется и вставляется в DOM при запуске обработчика события клика?   -  person Terry    schedule 11.05.2020
comment
Эй, помните, ваша функция get_opt() запускает асинхронный http-запрос. Ваш jquery().prop() вызывается до выполнения этого запроса. Вы должны поместить его в свою успешную функцию после вызова .html().   -  person Carsten Massmann    schedule 11.05.2020
comment
$('#list_option').html(response);, поэтому вы перезаписываете .prop("checked", true) содержимым из ajax_action. Добавьте console.log("1") (2,3...) в каждую строку, чтобы вы могли видеть порядок их выполнения. Похоже, вы ожидаете, что $('#list_option').html(response); запустится раньше .prop('checked',true);, когда этого не произойдет.   -  person freedomn-m    schedule 11.05.2020
comment
Большое спасибо cars10m и Freedomn-M. это точно так, как вы сказали. Я думал, что оператор будет выполняться последовательно. поэтому оператор prop() будет выполнен, когда get_opt() будет завершен. но теперь, как вы предложили, я поместил оператор prop в функцию успеха, и он работает нормально. еще раз спасибо.   -  person akash yadav    schedule 11.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вот как крутые ребята делают это в наши дни ;)

Используйте async/await для функции, которая вызывает $.ajax, ожидает завершения вызова ajax, а затем возвращает результат вызывающей функции.

Мы используем .then(), поэтому нам не нужно также оформлять анонимную функцию готовности документа асинхронно и ждать get_opt(). Используя then, он все равно будет ждать завершения get_opt.

Затем вы можете воздействовать на result внутри метода .then(), а также, надеюсь, установить 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);
    }

}
person Brian Patterson    schedule 10.05.2020
comment
Спасибо за ваш ответ. проблема была решена путем размещения оператора prop() в успешном вызове ajax. Ваш способ не пробовал. но попробую позже. - person akash yadav; 11.05.2020
comment
да, это тоже работает. я просто увлекался этим. :) - person Brian Patterson; 11.05.2020