javascript - Onclick 多个函数调用问题，还发送先前的点击数据

Question

我遇到了点击链接时发送重复调用的问题，其中包括以前的调用数据(如果进行了调用)。

这是相关链接的构造。

for (var key in res) {
        var followers = res[key].followers;
        var totalposts = res[key].totalposts;
        var id = res[key].id;
        var name = res[key].name;
        var titles = "";
        titles = '<ul class="titles">';
        if (typeof res[key].titles === "object") {
            for (var index in res[key].titles) {
                var url = res[key].titles[index].st_url;
                titles += '<li><div class="ui grid"><div class="ui fourteen wide column">\u2022 <a href="'+url+'">'+url+'</a></div><div class="ui two wide column"><a title"Remove this post" href="#" onclick="showRemPost('+id+', \''+url+'\', \''+name+'\')" id="remPostButton"><i class="ui remove grey circle icon"></i></a></div></div></li>';
            }
        }
        titles += "</ul>";
        html += 
            '<div class="ui eight wide column"><div class="ui segment" data-id="' + id + '" id="list' + id + '">' +  
            '<div class="listTitle"><h4 class="left">' + name + '</h4><div class="right"><a href="#" id="editListButton" onclick="showEditList('+id+')"><i class="edit icon"></i></a>&nbsp;<a href="#" id="remListButton" onclick="showRemList('+id+', \''+name+'\')"><i class="remove icon"></i></a></div><div class="clear"></div></div>' + 
            '<div>' + titles + 
            '</div>' +
            '<div class="footList"><div class="left"><p>Followers: <span class="follow">'+followers+'</span>' + 
            '<br/>Posts: <span class="post">'+totalposts+'</span>' + 
            /*'<br/>Upvotes: <span class="upvote">'+res[key].upvotes+'</span>' + */
            '</p></div>' + 
            '<div class="right"><a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton"><i class="ui add blue circle icon"></i></div></div><div class="clear"></a></div>' +
            '</div></div>';
    }

然后我有函数调用的代码:

showAddPost = function(id, lname){
    //do stuff
    console.log("\nshowAddPost function called");
}

console.log("\nshowAddPost function called"); 在第一次点击时显示 1 次，然后在第二次点击时显示 2 次，依此类推。每次，我都会获取上一次点击的数据。

由于有多个链接可供点击，因此连续点击的任何链接都会将所有先前的点击及其数据作为事件发送到 showAddPost。

例如:第一次点击的“ID”:“1”和“名称”:“One”。这些已发送。在第二个链接上，第二次单击“ID”:“2”和“name”:“Two”，它应该只调用一次，并且只发送“Two”数据，但它会将先前的数据“1:One”发送到该函数调用 showAddPost，然后它向 showAddPost 发送第二次调用，以获取使用“2:Two”单击的实际链接。如果我单击第三个链接(相同或不同)，它会将前两个数据发送到该函数。

解决此问题的唯一方法是将 onclick 从 HTML 移至其自己的 .on() 处理程序，然后通过 data- 获取数据 属性？或者我可以使用 .on() 处理程序以更简单的方式传递数据吗？我仍然可以使用 onclick 来解决这个问题吗？

所有这些都位于单独的命名空间中，而不是全局范围内。

谢谢大家的帮助。

Answer 1

您很可能没有关闭 a 标记。

所以你最终会得到

<a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton">  
    <a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton">
        ...

嵌套 a 标记无效。您的情况的问题是，由于点击事件向上冒泡，内部 a 标记将触发所有先前的标记。

<小时/>

更新代码和评论后更新

其实是的，这条线

'<div class="right"><a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton"><i class="ui add blue circle icon"></i></div></div><div class="clear"></a></div>' +

开始/结束标签匹配错误。让我们分解一下看看

<div class="right">
  <a href="#" onclick="showAddPost('+id+', \''+name+'\')" class="addPostButton">
    <i class="ui add blue circle icon"></i>
    </div> <!-- << this here does not match a div, it should be an a -->
</div>
<div class="clear">
  </a> <!-- << this here probably belong on the previous group -->
</div>