我无法使用动态 class 攻击 Onclick 项目

Question

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

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

首先当用户点击项目时，我替换 classes 并更改消息，没有 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;
            });

然后，当我第二次单击时，多亏了新的 class，它会启动：

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

问题是我只想在第二次点击时启动 POST。如果我在第一个函数上 return false，之后什么也没有发生，如果我删除它，它会启动 POST 两次（每次点击一次）

如果我去掉return false；在第一个功能上，然后当用户第一次按下该项目时调用第二个功能（为什么又一次）？

如何进行这项工作？

有点JSFIDDLE

提前致谢

Answer 1

问题是您将点击事件静态绑定到使用 class 选择器找到的元素。稍后是否删除 class 并不重要，因为处理程序已经绑定到元素。

更改为委托事件处理程序。然后将其绑定到祖先元素：

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

由于jQuery选择器仅在事件时间时运行，而不是事件注册时间，它当删除 class 时将不再匹配 并且事件将不会再次触发 .

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

注意：我不得不输入 console.log，因为重复点击不是 "visible" :)

第二个问题"was" return false 停止事件传播，但上面的代码也解决了这个问题。

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

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

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

Answer 2

您也可以尝试在第一个事件中使用 $(document).on()。

$(document).ready(function () {

    $(document).on("click", '.addvalidationmsg', 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");
    });
});

我无法使用动态 class 攻击 Onclick 项目

I Can't attack Onclick on item with dynamic class

javascript

jquery

event-bubbling