JQuery запускается до того, как мои данные загружены в элементы управления страницы

Question

Я использую ASP.NET MVC и jQuery.

У меня есть этот код в моем файле js. Он должен скрывать и показывать определенные элементы div, когда пользователь нажимает переключатель. Я также хотел бы запустить это при загрузке страницы, используя метод триггера. Кажется, моя проблема заключается в том, что когда событие инициируется, мои значения по умолчанию из модели не были загружены в элемент управления, и оба флажка имеют значение false. Мой код кажется правильным, но триггер срабатывает слишком рано. Есть ли способ указать триггеру jQuery не срабатывать, пока данные моей модели не будут загружены в элементы управления?

 $(function() { $('table#ScheduleTable
 input.DailyFrequency,
 input.WeeklyFrequency').click(function()
 {
     if ($(this).attr('checked') == true & $(this).val() == "Daily") {
         $('.dailyOption').children().show();
         $('.weeklyOption').children().hide();
     };
     if ($(this).attr('checked') == true & $(this).val() == "Weekly") {
         $('.dailyOption').children().hide();
         $('.weeklyOption').children().show();
     } });

 $('table#ScheduleTable
 input.DailyFrequency,
 input.WeeklyFrequency').trigger('click');
 });

Answer 1

Как вы загружаете значения на страницу? как правило, это не проблема, поскольку они присутствуют в выводе html, а JQuery ожидает загрузки, используя логику $ (function () {}.

Поскольку ваш триггер находится в логике $ (function () {}, он просто сразу запустит событие click после загрузки страницы.

Если вы загружаете значения, например, через ajax, вам нужно будет вызвать триггер после завершения вызова ajax.

Answer 2

Код обновлен до следующего. Теперь это работает. спасибо за ваши ответы! :)

$('table#ScheduleTable input.DailyFrequency,

input.WeeklyFrequency '). Нажмите (функция () { UpdateScheduleView (); });

function UpdateScheduleView() {
    if ($('input.DailyFrequency').attr('checked')

== верно) { $ ( 'DailyOption.) Дети () шоу ()..; $ ( 'WeeklyOption') дети () скрыть ()..; } еще { $ ( 'DailyOption.) Дети () скрыть ()..; $ ( 'WeeklyOption') дети () шоу ()..; } }

if ($('table#ScheduleTable input.DailyFrequency').length > 0) {
    UpdateScheduleView();

Answer 3

Что произойдет, если вместо этого вы объедините эти команды? Э.Г.

$(function() { $('table#ScheduleTable
 input.DailyFrequency,
 input.WeeklyFrequency').click(function()
 {
     if ($(this).attr('checked') == true & $(this).val() == "Daily") {
         $('.dailyOption').children().show();
         $('.weeklyOption').children().hide();
     };
     if ($(this).attr('checked') == true & $(this).val() == "Weekly") {
         $('.dailyOption').children().hide();
         $('.weeklyOption').children().show();
     } }).trigger('click');
 });

Я подозреваю, что с вашим текущим сценарием jQuery сначала запускает и настраивает функцию события щелчка, а после ее настройки jQuery переходит к настройке события триггера.

Возможно, если вы объедините их в цепочку, jQuery будет вынужден завершить сегмент кликов перед назначением триггера?

Answer 4

Я только что попробовал это в firefox, и $ (function () {}) и $ (document) .ready (function () {}), кажется, ведут себя одинаково, хотя форма .ready, кажется, рекомендуется jquery , Может быть, $ (document) .load будет работать лучше, так как может случиться, что в некоторых браузерах значения по умолчанию заполняются позже? Он ведет себя одинаково во всех браузерах или только в некоторых из них?

Answer 5

вместо этого вы должны использовать событие ready:

$(document).ready(function () {
  // do you jquery initialization here
   $('table#ScheduleTable....
  ...
});

http://docs.jquery.com/Events/ready