使用jquery单击来处理锚点onClick()

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/