jQuery Duplicate Selector error

Question

I am currently trying to set up a table with 6 clickable cels that allow for a input box to appear so you can add comments but I am getting a duplicated jQuery selector error and also through debugging my second function I found that .html() is not working either. Here is my code for the 6 functions; each of which are called when a specific cell is clicked:

$("#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);
});

And this is where they are called from:

  <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> 

I don't understand why I am getting a duplicate selector error on #mondayCommentLink, #tuesdayCommentLink, etc. Is there something I'm missing or mistakenly doing wrong? The first cell works and I can click it and a input box will pop up but it fails upon the second cell #tuesdayCommentLink at the line tuesday.htmls.html("test");.

Answer 1

There is no such a Duplicated jQuery Selector error; that's a warning thrown by IntelliJ (and other IDEs from idea like WebStorm...) suggesting that you should store your jQuery selection in a local variable rather than repeating the selection.

Excerpt from jQuery documentation:

Saving Selections

jQuery doesn't cache elements for you. If you've made a selection that you might need to make again, you should save the selection in a variable rather than making the selection repeatedly.

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

Once the selection is stored in a variable, you can call jQuery methods on the variable just like you would have called them on the original selection.

A selection only fetches the elements that are on the page at the time the selection is made. If elements are added to the page later, you'll have to repeat the selection or otherwise add them to the selection stored in the variable. Stored selections don't magically update when the DOM changes.

However, in your code there is no duplicated jQuery selection so I bet that warning is coming from somewhere else.. What is in line with the fact that the error persists after adding the missing $.

In general is a good practice to add the reported error to your questions..

Answer 2

The "duplicate selector" is indeed a JS lint warning, that you'll see in IDEs like PHPStorm / WebStorm. For performance reasons, you'll want to cache your selectors whenever possible.. e.g.:

(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);

.. and so on. I just did Monday, but you'd continue to add a variable reference to the selector that you can grab that's already in memory. Things are a bit more complicated when dealing with AJAX or if you have multiple scopes, but this is the basic idea. It's just convention, but I find it easier to reference selectors with var $elem and camelcased.

Answer 3

Duplicate jQuery Selector

is a warning or hint from JSHint. It is not an error.

If you select a DOM element multiple times without a block of code in JavaScript or jQuery, this warning is shown.

For best practice, you should assign it to a variable like this:

let $myInput = jQuery('.first-name');

in that way, you can use $myInput for further codes.

Answer 4

I had this same error trying something like this:

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

For some reason, the error was thrown on "#checkbox". I solved the problem by including:

//noinspection JSJQueryEfficiency at the top of the if statement like this:

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

and the error message went away.