单击事件未发布到处理程序

Question

我正在玩 JQuery，我试图在按钮上触发 Click 事件，运行关闭我的 asp.net 中的处理程序] 应用程序，并得到一些奇怪的结果。

我会 post 代码然后解释发生了什么 :-

 $(function () {

            $("[id$='btnClaimValidate']").click(callSwapClaimHandler);

            function callSwapClaimHandler() {


                $.ajax({
                    type: 'POST',
                    url: "/handlers/investor-tickets/claimswapvalidator.ashx",
                    data: {
                        investorId: $("[id$='hdnInvestor']").val(),
                        investorTicketId: $("[id$='hdnInvestorTicket']").val(),
                        originalClaimId: $("[id$='hdnInvestorTicketClaimId']").val(),
                        newClaimId: $("[id$='txtClaim']").val()

                    },

                    dataType: "html",
                    error: function () {
                        alert("failure");
                    },
                    success:

                        function (data) {

                            var $newdiv = data;
                            $("[id$='divMessageData']").append($newdiv);
                        }

                });
            }

        });

使用上面的代码，永远不会调用处理程序。该事件在点击时 100% 被触发。我已经通过删除 ajax post 函数进行了测试，并用一个简单的 alert("Hello); 命令替换了它。

奇怪的是，如果我通过这样做注册点击事件以在 DOM 加载时实际执行 :-

$("[id$='btnClaimValidate']").click(callSwapClaimHandler());

处理程序在页面加载时触发，然后按预期工作。

去掉括号，只在点击时触发，post 永远不会真正执行。

我已经调试了浏览器会话和函数运行s，但它从未到达处理程序，也没有返回任何内容。

谁能解释一下哪里出了问题？

Answer 1

此处的简单解释是您的按钮选择器 - [id$='btnClaimValidate'] - 在执行时不匹配任何内容。很难说为什么（你在页面加载后生成 DOM 的那部分？你有打字错误吗？）但你可以很容易地测试它：

$(function()
{
  alert($("[id$='btnClaimValidate']").length);
});

如果该值为 0，则这是您的问题，您将有一个特定区域可以进一步调查。

或者，使用浏览器的 DOM 检查器来验证加载完成后事件是否已实际附加到按钮。

如果问题仅仅是按钮添加到 DOM 页面加载后 ，那么您可能需要考虑使用 delegated event 而不是将处理程序直接附加到按钮。例如：

$("document").on("click", "[id$='btnClaimValidate']", callSwapClaimHandler);

这会将事件附加到文档（存在）但要求处理程序仅在事件从按钮冒泡时调用（绑定处理程序时可能不存在，但稍后可能会).

Answer 2

您对 @Scarface Ron 的评论就是线索。您的页面正在刷新，因为默认按钮行为并未停止。也只需在处理程序中使用内联函数：

$(function () {

    $("[id$='btnClaimValidate']").click(function (e) {
        // Stop the button actioning!
        e.preventDefault();

        $.ajax({
            type: 'POST',
            url: "/handlers/investor-tickets/claimswapvalidator.ashx",
            data: {
                investorId: $("[id$='hdnInvestor']").val(),
                investorTicketId: $("[id$='hdnInvestorTicket']").val(),
                originalClaimId: $("[id$='hdnInvestorTicketClaimId']").val(),
                newClaimId: $("[id$='txtClaim']").val()

            },

            dataType: "html",
            error: function () {
                alert("failure");
            },
            success:

            function (data) {

                var $newdiv = data;
                $("[id$='divMessageData']").append($newdiv);
            }

        });
    });

});

如果我在这里弄错了右大括号，我深表歉意

单击事件未发布到处理程序

Click event not posting to handler

c#

asp.net

jquery