jQuery复制选择器错误 [英] jQuery Duplicate Selector error

问题描述

我目前正试图用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 =mondayCommentname =mondayCommentstyle =text-align：center; width：115px;>< div id =mondayCommentLink> + LT; / DIV>< /第> 
< th id =tuesdayCommentname =tuesdayCommentstyle =text-align：center; width：115px;>< div id =tuesdaysCommentLink> +< / div>< ; /第> 
< th id =wednesdayCommentname =wednesdayCommentstyle =text-align：center; width：115px;>< div id =wednesdayCommentLink> +< / div>< ; /第> 
< th id =thursdayCommentname =thursdayCommentstyle =nowrap; text-align：center; width：115px;>< div id =thursdayCommentLink> +< / div> ;< /第> 
< th id =fridayCommentname =fridayCommentstyle =text-align：center; width：115px;>< div id =fridayCommentLink> +< / div>< ; /第> 
< th id =saturdayCommentname =saturdayCommentstyle =text-align：center; width：115px;>< div id =saturdayCommentLink> +< / div>< ; /第> 
  

我不明白为什么我在上得到一个重复的选择器错误＃ mondayCommentLink ， #tuesdayCommentLink 等。有没有我错过或错误的错误？第一个单元格工作，我可以单击它，一个输入框将弹出，但是在第二个单元格 #tuesdayCommentLink 在 tuesday.htmls .html（test）; 。

解决方案

没有这样一个重复的jQuery选择器错误;这是IntelliJ（和其他IDE从WebStorm ...等想法）抛出的警告，表明您应该将jQuery选择存储在局部变量中，而不是重复选择。

摘自 jQuery文档：

保存选择

jQuery不会为您缓存元素。如果您进行了选择，您可能需要再次进行选择，则应将选择保存在变量中，而不是重复进行选择。

1 | var divs = $（div）;

将选择存储在变量中后，可以调用变量上的jQuery方法就像你原来的选择一样。

选择只能在选择时提取页面上的元素。如果稍后将元素添加到页面中，则必须重复选择，否则将其添加到存储在变量中的选择。存储的选择在DOM更改时不会神奇地更新。

但是，在代码中没有重复的jQuery选择，所以我打赌警告来自其他地方..什么是符合这个事实的错误仍然存​​在，在添加缺少的 $ 。

一般来说，将报告的错误添加到您的问题中是一个很好的做法。

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");.

解决方案

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

这篇关于jQuery复制选择器错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！