Question

我在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的正确值完美配合。

Answer 1

首次单击该链接时，将执行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元素的第一次出现，并忽略所有其他元素。

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'); */

    });
 });

我改变了一些事情：

删除onclick attr并在document.ready
将solTitle更改为CLASS：ID无法重复

Answer 5

您不能多次为元素使用相同的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 = ''; 

});

Answer 6

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

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

没有必要同时拥有

使用jquery单击来处理锚点onClick（）

6 个答案: