javascript - 我无法攻击具有动态类的项目上的 Onclick

Question

我使用两次验证来确保用户确实想要删除该项目。

<span class="addvalidationmsg" data-actionresult="DeleteInstallation">CLICK ME</span>

首先，当用户单击项目时，我替换类并更改消息，并且没有 POST，只是在 DOM 上进行更改:

$(".addvalidationmsg").click(function () {
                // remove validation message
                $(this).removeClass("addvalidationmsg");
                // add ajaxcall
                $(this).addClass("ajaxcall");
                // add text
                $(this).text("are you sure? Click again");

                return false;
            });

然后，当我第二次单击时，由于新的类，它启动了这个:

$(document).on("click", ".ajaxcall", function () {
                alert("POST");
            });
    });

问题是我只想在第二次单击时启动 POST。如果我在第一个函数上返回 false，则此后不会发生任何事情，如果我删除它，它会启动 POST 两次(每次点击一次)

如果我删除则返回 false;在第一个函数上，然后当用户第一次按下该项目时调用第二个函数(为什么又)？

如何实现这一点？

一点JSFIDDLE

提前致谢

Answer 1

问题在于您将单击事件静态绑定(bind)到使用类选择器找到的元素。如果稍后删除该类也没关系，因为处理程序已经绑定(bind)到该元素。

更改为委托(delegate)事件处理程序。然后将其绑定(bind)到祖先元素:

$(document).on('click', ".addvalidationmsg", function () {

由于 jQuery 选择器仅在事件时间运行，而不是事件注册时间，因此当类被删除时它将不再匹配并且事件将不再开火。

JSFiddle: http://jsfiddle.net/TrueBlueAussie/2xaa26yr/2/

注意:我必须放入 console.log，因为重复点击不“可见”:)

第二个问题"is"返回 false 停止事件传播，但这也随着上面的代码而消失。

如果您从未打算重新启用该按钮，另一种选择是使用one。这只会触发事件一次......永远:

$(".addvalidationmsg").one('click', function () {

JSFiddle:http://jsfiddle.net/TrueBlueAussie/2xaa26yr/3/