使用jquery点击处理锚onClick（）

我在for循环中有一组dynamic生成的锚标记，如下所示：

<div id = "solTitle"> <a href = "#" id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>'; 

一旦这个代码被执行，其中一个案例的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> 

现在我想要点击上面的链接显示不同的文本。 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 = ''; }); } 

当我执行它并点击任一链接时，stream程不会进入jquery点击处理程序。 我通过使用上面的警报检查它。 它只显示警报 – “在这里”而不是警报 – “在这里”。 在第二次点击链接时，一切正常与divId的正确值。

Answer 1

第一次点击链接时，执行openSolution函数。 该函数将click事件处理程序绑定到链接，但不会执行它。 第二次点击链接时， click事件处理程序将被执行。

你在做什么似乎有点失败的地步，首先使用jQuery。 为什么不把click事件绑定到第一个元素：

 $(document).ready(function() { $("#solTitle a").click(function() { //Do stuff when clicked }); }); 

这样你就不需要你的元素的onClick属性。

它也看起来像你有多个元素具有相同的id值（“solTitle”），这是无效的。 你需要find一些其他的共同特征（ class通常是一个很好的select）。 如果将所有出现的id="solTitle"更改为class="solTitle" ，则可以使用类select器：

 $(".solTitle a") 

由于重复的id值是无效的，当面对同一个id多个副本时，代码将无法正常工作。 往往会发生的是，使用该id的元素的第一次出现，所有其他的被忽略。

Answer 2

让一个onclick事件的锚定标签，调用一个Javascript函数。

 <a href="#" onClick="showDiv(1);">1</a> 

现在在javascript中写下面的代码

 function showDiv(pageid) { alert(pageid); } 

这会告诉你一个“1”的警报。

Answer 3

HTML应该如下所示：

 <div class="solTitle"> <a href="#" id="solution0">Solution0 </a></div> <div class="solTitle"> <a href="#" id="solution1">Solution1 </a></div> <div id="summary_solution0" style="display:none" class="summary">Summary solution0</div> <div id="summary_solution1" style="display:none" class="summary">Summary solution1</div> 

和javascript：

 $(document).ready(function(){ $(".solTitle a").live('click',function(e){ var contentId = "summary_" + $(this).attr('id'); $(".summary").hide(); $("#" + contentId).show(); }); }); 

请参阅示例： http : //jsfiddle.net/kmendes/4G9UF/

Answer 4

 <div class = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> <div class= "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br> $(document).ready(function(){ $('.solTitle a').click(function(e) { e.preventDefault(); alert('here in'); var divId = 'summary' +$(this).attr('id'); document.getElementById(divId).className = ''; /* or $('#'+divid).removeAttr('class'); */ }); }); 

我改变了一些东西：

1. 删除onclick attr并绑定document.ready内部的click事件
2. 改变solTitle是一个ID到一个CLASS：ID不能重复

Answer 5

你正在分配一个函数内的onclick事件。 这意味着一旦该函数执行一次，第二个onclick事件也被分配给该元素。

分配函数onclick或使用jquery click() 。

没有必要有两个

Answer 6

你不能有多个时间元素相同的ID。 它意味着独特。

使用课程并使您的ID独一无二：

 <div class="solTitle" id="solTitle1"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> 

并使用类select器：

 $('.solTitle a').click(function(evt) { evt.preventDefault(); alert('here in'); var divId = 'summary' + this.id.substring(0, this.id.length-1); document.getElementById(divId).className = ''; });