使用jQuery click处理锚点onClick(）

Use jQuery click to handle anchor onClick()

本文关键字：onClick jQuery click 处理 使用      更新时间：2023-09-26

我在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点击处理程序。我通过上面使用的警报进行了检查。它只显示警报"在这里"，而不显示警报"在此"。第二次单击链接时，所有内容都能以正确的divId值完美工作。

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

您所做的似乎有点违背了使用jQuery的初衷。为什么不首先将点击事件绑定到元素：

$(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事件。ready
  2. 已将solTitle更改为CLASS: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()。

不需要同时拥有

相关文章：