Как использовать функцию .on () для этой ситуации

Question

В верхней части моего приложения пользователь может выбрать свои варианты и ответы, а затем он может сохранить свои варианты и ответы в новой строке таблицы.

Какой у меня вопрос, как я могу получить каждый икаждая строка выполняет те же функции, что и функции опций и ответов выше, так что если пользователь передумает изменить параметр или ответ в определенной строке, он может изменить его в строке.

Мой кодна JSFiddle .Пожалуйста, следуйте приведенным ниже инструкциям, если вы хотите использовать функцию опций и ответов в скрипте.

1. Откройте сетку и выберите опцию «3».«3» отображается в текстовом поле, а кнопки A – C отображаются ниже.

2. Введите число 2 в текстовом поле «Количество ответов».Это означает, что можно выбрать только 2 кнопки между кнопками от A до C.

3. Выберите кнопки A и B, если вы попытаетесь выбрать другую кнопку, появится предупреждение о том, что вы превысили предел.

4. Нажмите кнопку «Добавить вопрос», и будет создана строка с указанием ваших данных.

Я хочу, чтобы все функции в каждом столбцесоответствовать функциональности опций и ответов функции сверху.Я знаю, что мне нужно использовать функцию .on(), но как я могу включить ее для каждой строки?

Answer 1

Если я правильно понимаю, вы хотите знать, как повторно использовать «предупреждение» на шаге «3» в отношении строк таблицы.

Тогда вы правы - «вкл» - это та функция, которую вы хотите. (эта функция не поддерживает живую функцию ) Что делает «on», так это переоценивает селектор для каждого события.

Вместо назначения события "onclick" в

<input class="answerBtns" name="answerAName" id="answerA" type="button" value="A" onclick="btnclick(this);"/>

Вы должны написать следующее

$(".answerBtns").on("click",btnclick); 

Это будет эффективно привязывать метод "btnclick" к каждому элементу ".answerBtns", который есть или будет у этой страницы (настоящий и будущий) - поскольку селектор $ (". AnswerBtns") будет переоцениваться при каждом щелчке.

Теперь осталось только обобщить функцию "btnclick" для поддержки всех сценариев. Это означает, что он должен определить, находится ли он в строке или в форме, и вести себя соответствующим образом.

Например (непроверенный, но не псевдокод):

<script>
  function btnclick(){
      if ( $(this).closest("#qandatbl").length > 0 ) {  // we are in the table because we are wrapped in a table
           var myRow = $(this).closest("tr");
           var ourLimit = myRow.find(".numberAnswerTxtRow").val();
           if ( myRow.find(".answerBtnsOn").length > ourLimit ){
                 alert("...");... 
           }
      }else{...} // we are not in a table.. lets do what we always did. 
  }
</script>

Как видите, я использовал ближайший и find , потому что они дают мне ту же функциональность, но только относительно источника щелчка.

Дайте мне знать, если я что-то пропустил, и я добавлю это.