jquery - 分离 jQuery 函数？

Question

所以我只是想拥有 3 个链接，当您单击一个链接时，它会呈现相应的表单。我以为我熟悉 jQuery，但显然没有发生奇怪的事情。我的代码如下

jQuery

$("#show_basic_selector").click(function() {
    hide().after('<%= j render("basic") %>');
});

$("#show_team_selector").click(function() {
    alert("Hello");
});

$("#show_custom_selector").click(function() {
    alert("Hello");
});

看法

<%= link_to "Show form 1", { :action => 'new_order' }, id: "show_basic_selector", remote: true %>

<%= link_to "Show form 2", { :action => 'new_order' }, id: "show_team_selector", remote: true %>

<%= link_to "Show form 3", { :action => 'new_order' }, id: "show_custom_selector", remote: true %>

我的问题是当我使用警报功能测试它是否有效时，当我点击一个链接时，当我点击它时它会开始显示随机数量的警报（2-15），当我设置render 函数，它隐藏所有三个并显示所有三个表单。知道发生了什么吗？

Answer 1

您可能正在附加多个事件处理程序，我认为您的意思是在您的第一个函数中定位 $(this) 。尝试取消附加其他事件处理程序以确保您只获得一个。这并不理想，因为您的应用程序中可能存在设计缺陷或错误，但试试这个：

$("#show_basic_selector").off().on('click' , function() {
    $(this).hide().after('<%= j render("basic") %>');
});

$("#show_team_selector").off().on('click', function() {
    alert("Hello");
});

$("#show_custom_selector").off().on('click', function() {
    alert("Hello");
});