Ошибка JQuery Duplicate Selector

В настоящее время я пытаюсь настроить таблицу с 6 кликами, которые позволяют отображать окно ввода, чтобы вы могли добавлять комментарии, но я получаю дублируемую ошибку селектора jQuery, а также через отладку второй функции, которую я обнаружил, что .html() не работает. Вот мой код для 6 функций; каждый из которых вызывается при нажатии на конкретную ячейку:

$("#mondayCommentLink").click(function (){
    var mondayhtmls = $("#mondayComment");
    var input = $("<input type='text' id='mondayCommentText' name='mondayCommentText'  />");
    input.val(data.days[0].comment);
    mondayhtmls.html(input);
});

$("#tuesdaysCommentLink").click(function (){
    var tuesdayhtmls = ("#tuesdayComment");
    var inputt = $("<input type='text' id='tuesdayCommentText' name='tuesdayCommentText' />");
    inputt.val(data.days[1].comment);
    tuesdayhtmls.html("test");
});

$("#wednesdayCommentLink").click(function (){
    var htmls = ("#wednesdayComment");
    var input = $("<input type='text' id='wednesdayCommentText' name='wednesdayCommentText' />");
    input.val(data.days[2].comment);
    htmls.html(input);
});

$("#thursdayCommentLink").click(function (){
    var htmls = ("#thursdayComment");
    var input = $("<input type='text' id='thursdayCommentText' name='thursdayCommentText' />");
    input.val(data.days[3].comment);
    htmls.html(input);
});

$("#fridayCommentLink").click(function (){
    var htmls = ("#fridayComment");
    var input = $("<input type='text' id='fridayCommentText' name='fridayCommentText' />");
    input.val(data.days[4].comment);
    htmls.html(input);
});

$("#saturdayCommentLink").click(function (){
    var htmls = ("#saturdayComment");
    var input = $("<input type='text' id='saturdayCommentText' name='saturdayCommentText' />");
    input.val(data.days[5].comment);
    htmls.html(input);
});

И здесь они вызываются из:

  <th id="mondayComment" name="mondayComment" style="text-align: center; width: 115px;"><div id="mondayCommentLink">+</div></th>
  <th id="tuesdayComment" name="tuesdayComment" style="text-align: center; width: 115px;"><div id="tuesdaysCommentLink">+</div></th>
  <th id="wednesdayComment" name="wednesdayComment" style="text-align: center; width: 115px;"><div id="wednesdayCommentLink">+</div></th>
  <th id="thursdayComment" name="thursdayComment" style="nowrap; text-align: center; width: 115px;"><div id="thursdayCommentLink">+</div></th>
  <th id="fridayComment" name="fridayComment" style="text-align: center; width: 115px;"><div id="fridayCommentLink">+</div></th>
  <th id="saturdayComment" name="saturdayComment" style="text-align: center; width: 115px;"><div  id="saturdayCommentLink">+</div></th>

Я не понимаю, почему я получаю дублирующую ошибку выбора на #mondayCommentLink, #tuesdayCommentLink и т.д. Есть ли что-то, что я пропускаю или ошибочно делаю неправильно? Первая ячейка работает, и я могу щелкнуть ее, и появится окно ввода, но оно не будет выполнено во второй ячейке #tuesdayCommentLink в строке tuesday.htmls.html("test");.

Ответы

Ответ 1

Нет такой ошибки Duplicated jQuery Selector; что предупреждение, выпущенное IntelliJ (и другими IDE от идеи, такой как WebStorm...), предполагает, что вы должны сохранить свой выбор jQuery в локальной переменной, а не повторять выбор.

Выдержка из документации jQuery:

Сохранение выбора

jQuery не кэширует элементы для вас. Если вы сделали выбор, который может понадобиться сделать снова, вы должны сохранить выбор в переменной, а не повторять выбор.

1| var divs = $( "div" );

Как только выбор будет сохранен в переменной, вы можете вызвать методы jQuery для переменной так же, как вы бы назвали их в исходном выборе.

Выбор выбирает только элементы, которые находятся на странице во время выбора. Если элементы будут добавлены на страницу позже, вам придется повторить выбор или иначе добавить их в выборку, хранящуюся в переменной. Сохраненные выделения не изменяют магию при изменении DOM.

Однако в вашем коде нет дублированного выбора jQuery, поэтому я уверен, что это предупреждение происходит откуда-то еще. Что соответствует тому факту, что ошибка сохраняется после добавления отсутствующего $.

В целом хорошая практика добавить сообщенную ошибку на ваши вопросы.

Ответ 2

"Повторяющийся селектор" действительно является предупреждением JS lint, которое вы увидите в IDE, например PHPStorm/WebStorm. По соображениям производительности вы захотите кэшировать свои селекторы, когда это возможно... например:

(function($) {
  var 
    $mondayCommentLink = $("#mondayCommentLink"),
    $mondayHtmls = $("#mondayComment"),
    $inputMonday = $("<input type='text' id='mondayCommentText' name='mondayCommentText'  />");

    $mondayCommentLink.on('click', function() {
      $inputMonday.val(data.days[0].comment);
      $mondayHtmls.html($inputMonday);
    });

})(jQuery);

.. и так далее. Я только что сделал в понедельник, но вы продолжаете добавлять ссылку на переменную для селектора, которую вы можете захватить уже в памяти. Что-то еще сложнее при работе с AJAX или если у вас несколько областей, но это основная идея. Это просто соглашение, но мне легче ориентировать селектора с var $elem и camelcased.

Ответ 3

У меня была такая же ошибка, попробовав что-то вроде этого:

if  ($("#checkbox").is(':checked')){
   value = $("#checkbox").val();

По какой-то причине ошибка была сброшена на "#checkbox". Я решил проблему, включив в нее:

//noinspection JSJQueryEfficiency в верхней части инструкции if:

 //noinspection JSJQueryEfficiency
 if  ($("#checkbox").is(':checked')){
   value = $("#checkbox").val();

и сообщение об ошибке исчезло.