使用 jQuery click 处理锚 onClick()

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

<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 = '';


});
}

当我执行它并单击其中任何一个链接时，流不会进入 jquery click 处理程序。我通过上面的警报进行了检查。它只显示警报-“ here”而不显示警报-“ here in”。 在第二次单击链接时，所有东西都可以使用正确的 divId 值完美工作。

498835 次浏览
小开

元素不能有多个相同的 ID，它应该是唯一的。

使用一个类并使您的 ID 独一无二:

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

And use the class selector:

$('.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 = '';


});
小开

在函数内部分配 onclick事件。 That means once the function has executed once, the second onclick event is assigned to the element as well.

要么分配函数 onclick，要么使用 jquery click()。

没必要两者兼得

小开
最佳答案

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

您所做的似乎有点违背了最初使用 jQuery 的初衷。为什么不一开始就将 click 事件绑定到元素:

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

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

看起来还有多个元素具有相同的 id值(“ solTitle”) ，这是无效的。您需要找到一些其他的共同特征(class通常是一个很好的选择)。如果将 id="solTitle"的所有匹配项都更改为 class="solTitle"，则可以使用类选择器:

$(".solTitle a")

由于重复的 id值是无效的，当面对同一 id的多个副本时，代码将不能按预期工作。通常发生的情况是，使用带有该 id的元素的第一个匹配项，而忽略所有其他元素。

小开 
<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. 在 document.ready 中删除 onclick attr 并绑定 click 事件
  2. 修改为类的 ID: ID 不能重复
小开

The HTML should look like:

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

小开

让我们使用一个带有 onclick 事件的锚标记，该事件调用 Javascript 函数。

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

现在用 javascript 编写下面的代码

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

这会显示“1”的警报。


提交答案