javascript - 使用jquery单击来处理锚点onClick（）(Use jquery click to handle anchor onClick())

Question

I have a set of dynamically generated anchor tags in a for loop as follows:(我在for循环中有一组动态生成的锚标记，如下所示：)

<div id = "solTitle"> <a href = "#" id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>'; Once this code is executed the html output for one of the case would look like:(执行此代码后，其中一个案例的html输出将如下所示：) <div id = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> <div id = "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br> Now I want different texts to be displayed on clicking the above links.(现在我希望在点击上面的链接时显示不同的文本。) openSolution() looks like this:(openSolution（）看起来像这样：) function openSolution() { alert('here'); $('#solTitle a').click(function(evt) { evt.preventDefault(); alert('here in'); var divId = 'summary' + $(this).attr('id'); document.getElementById(divId).className = ''; }); } When I execute it and click on either of the links, the flow doesnot come inside the jquery click handler.(当我执行它并单击任一链接时，流不会进入jquery单击处理程序。) I checked it by the above alerts used.(我通过上面使用的警报检查了它。) It only displays the alert - 'here' and not the alert - 'here in'.(它只显示警报 - “此处”而非警报 - “此处”。) On clicking the link second time, everything works perfectly with correct value of divId.(在第二次单击链接时，一切都与divId的正确值完美匹配。)   ask by crazy_coder translate from so

Answer 1

The first time you click the link, the openSolution function is executed.(第一次单击链接时，将执行openSolution功能。)

That function binds the click event handler to the link, but it won't execute it.(该函数将click事件处理程序绑定到链接，但它不会执行它。) The second time you click the link, the click event handler will be executed.(第二次单击该链接时，将执行click事件处理程序。) What you are doing seems to kind of defeat the point of using jQuery in the first place.(你正在做的事情似乎首先打败了使用jQuery的重点。) Why not just bind the click event to the elements in the first place:(为什么不直接将click事件绑定到元素：) $(document).ready(function() { $("#solTitle a").click(function() { //Do stuff when clicked }); }); This way you don't need onClick attributes on your elements.(这样，您就不需要元素上的onClick属性。) It also looks like you have multiple elements with the same id value ("solTitle"), which is invalid.(看起来你有多个具有相同id值的元素（“solTitle”），这是无效的。) You would need to find some other common characteristic ( class is usually a good option).(您需要找到一些其他常见特征（ class通常是一个很好的选择）。) If you change all occurrences of id="solTitle" to class="solTitle" , you can then use a class selector:(如果将所有出现的id="solTitle"更改为class="solTitle" ，则可以使用类选择器：) $(".solTitle a") Since duplicate id values is invalid, the code will not work as expected when facing multiple copies of the same id .(由于重复的id值无效，因此当面对同一个id多个副本时，代码将无法按预期工作。) What tends to happen is that the first occurrence of the element with that id is used, and all others are ignored.(容易发生的是使用具有该id的元素的第一次出现，并且忽略所有其他元素。)