使用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处理程序内。我通过上面使用的警报检查了它。它仅显示警报-“此处”，而不显示警报-“此处”。第二次单击该链接时，一切正确，只要使用divId的正确值即可。

首次单击链接时，将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使用的元素的第一次出现，而所有其他元素都将被忽略。

让我们通过带有onclick事件的锚标记来调用Javascript函数。

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

现在在javascript中编写以下代码

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

这将向您显示警报“ 1”。

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/

<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属性并在文档内部绑定click事件。
2. 将solTitle更改为CLASS的ID：ID不能重复

您不能多次使用相同的元素ID。它是唯一的。

使用一个类并使您的ID唯一：

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

并使用类选择器：

$('.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函数内部分配事件。这意味着一旦函数执行一次，第二个onclick事件也将分配给该元素。

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

两者都不需要