Question

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

我会发布代码，然后解释发生了什么： -

 $(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);命令以确保。

奇怪的是，如果我通过这样做注册click事件以实际执行DOM加载： -

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

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

通过取下括号，以便只在点击时触发，该帖子实际上从未执行过。

我已经调试了浏览器会话，并且该函数运行，但它永远不会到达处理程序，也不会返回任何内容。

任何人都可以解释出现了什么问题吗？

Answer 1

您对@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);
            }

        });
    });

});

道歉，如果我在这里收到错误的结束

Answer 2

这里简单的解释是你的按钮选择器 - [id$='btnClaimValidate'] - 在执行时没有匹配任何东西。很难说为什么（你在页面加载后生成DOM的那部分？你有一个错字？）但你可以很容易地测试这个：

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

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

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

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

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

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

点击事件不发布到处理程序

2 个答案: