Javascript 使用 jquery click 处理锚点 onClick()

Use jquery click to handle anchor onClick()

提问by crazy_coder

I have a set of dynamically generated anchor tags in a for loop as follows:

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

<div id = "solTitle"> <a href = "#"  id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>';

Once this code is executed the html output for one of the case would look like:

执行此代码后，其中一种情况的 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>

Now I want different texts to be displayed on clicking the above links. openSolution() looks like this:

现在我希望在单击上述链接时显示不同的文本。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 = '';

    });
}

When I execute it and click on either of the links, the flow doesnot come inside the jquery click handler. I checked it by the above alerts used. It only displays the alert - 'here' and not the alert - 'here in'. On clicking the link second time, everything works perfectly with correct value of divId.

当我执行它并单击任一链接时，流不会进入 jquery 单击处理程序。我通过上面使用的警报检查了它。它只显示警报——“这里”而不是警报——“这里”。第二次单击链接时，一切正常，divId 值正确。

回答by James Allardice

The first time you click the link, the openSolutionfunction is executed. That function binds the clickevent handler to the link, but it won't execute it. The second time you click the link, the clickevent handler will be executed.

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

What you are doing seems to kind of defeat the point of using jQuery in the first place. Why not just bind the click event to the elements in the first place:

你所做的似乎有点挫败了首先使用 jQuery 的意义。为什么不首先将点击事件绑定到元素：

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

This way you don't need onClickattributes on your elements.

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

It also looks like you have multiple elements with the same idvalue ("solTitle"), which is invalid. You would need to find some other common characteristic (classis usually a good option). If you change all occurrences of id="solTitle"to class="solTitle", you can then use a class selector:

看起来您还有多个具有相同id值（“solTitle”）的元素，这是无效的。您需要找到其他一些共同特征（class通常是一个不错的选择）。如果更改所有出现的id="solTitle"to class="solTitle"，则可以使用类选择器：

$(".solTitle a")

Since duplicate idvalues is invalid, the code will not work as expected when facing multiple copies of the same id. What tends to happen is that the first occurrence of the element with that idis used, and all others are ignored.

由于重复id值无效，因此代码在面对相同id. 往往发生的情况是使用第一个出现的元素id，而忽略所有其他元素。

回答by Tapan kumar

Lets take an anchor tag with an onclick event, that calls a Javascript function.

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

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

Now in javascript write the below code

现在在javascript中编写以下代码

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

This will show you an alert of "1"....

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

回答by Karl Mendes

The HTML should look like:

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>

And the javascript:

和 javascript：

$(document).ready(function(){
    $(".solTitle a").live('click',function(e){
        var contentId = "summary_" + $(this).attr('id');
        $(".summary").hide();
        $("#" + contentId).show();
    });
});

See the Example: http://jsfiddle.net/kmendes/4G9UF/

请参阅示例：http: //jsfiddle.net/kmendes/4G9UF/

回答by Toni Michel Caubet

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

    });
 });

I changed few things:

我改变了几件事：

1. remove the onclick attr and bind click event inside the document.ready
2. changed solTitle to be an ID to a CLASS: id cant be repeated

1. 删除 onclick attr 并在 document.ready 中绑定 click 事件
2. 将 solTitle 更改为 CLASS 的 ID：id 不能重复

回答by Didier Ghys

You can't have multiple time the same ID for elements. It is meant to be unique.

元素不能多次使用相同的 ID。它是独一无二的。

Use a class and make your IDs unique:

使用类并使您的 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 = ''; 

});

回答by clem

You are assigning an onclickevent inside an function. That means once the function has executed once, the second onclickevent is assigned to the element as well.

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

Either assign the function onclickor use jquery click().

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

There's no need to have both

没必要两者兼得