Question

我正在研究通知系统并将数据库中的html通知正文加载到以下填充的视图中：

<form id="acceptInviteForm" method="POST">
    <input type="hidden" name="accountId" value="6">
    <input type="hidden" name="operation" value="acceptinvite">

    <button class="acceptinvite btn btn-primary" href="/acceptinvite" onclick="acceptingRequest();">Accept Invitation</button>
</form>

并应用我在同一页面上定义的jQuery函数是这样的：

// Accept invitation button click
jQuery(document).ready(function() {
    function acceptingRequest() {

        var formData = jQuery("#acceptInviteForm").serialize();
        alert(formData);

        jQuery.ajax({
            type: "POST",
            url: "/acceptinvite",
            data: formData,
            dataType: "json",

            beforeSubmit: function() {
                jQuery(this).attr({"disabled":"disabled"});
            },
            success: function(data) {
                alert("Success");
            },
            error: function() {
                alert("Got error while accepting invitation, reload or contact administrator!");
            }
        });
    }
});

因此，当用户点击按钮时，即使没有显示alert也无法正常工作。

但是当我在Chrome控制台上注入上面的jquery函数时，事情变得越来越有趣 ，同时加载了视图并且按钮开始正常工作并显示警告太！

我没有得到不让事情奏效的观点！

Answer 1

我认为你在文件就绪上定义函数acceptingRequest（），但你并没有真正调用它。尝试添加：

acceptingRequest();

在accepttingRequest（）函数的定义之后。结果将是：

// Accept invitation button click
jQuery(document).ready(function() {
    function acceptingRequest() {

        var formData = jQuery("#acceptInviteForm").serialize();
        alert(formData);

        jQuery.ajax({
            type: "POST",
            url: "/acceptinvite",
            data: formData,
            dataType: "json",

            beforeSubmit: function() {
                jQuery(this).attr({"disabled":"disabled"});
            },
            success: function(data) {
                alert("Success");
            },
            error: function() {
                alert("Got error while accepting invitation, reload or contact administrator!");
            }
        });
    }
    acceptingRequest();
});

Answer 2

这是因为这个字符串

<button class="acceptinvite btn btn-primary" href="/acceptinvite" onclick="acceptingRequest();">Accept Invitation</button>

浏览器将在您的acceptingRequest函数定义之前提取

。当document ready被触发时，代码中的'acceptingRequest'将被异步定义。因此浏览器无法使用click侦听器进行分配。尝试将您的脚本准确地放在</body>之前（以及jQuery脚本之后）且没有jQuery(document).ready

<script>
function acceptingRequest() {

    var formData = jQuery("#acceptInviteForm").serialize();
    alert(formData);

    jQuery.ajax({
        type: "POST",
        url: "/acceptinvite",
        data: formData,
        dataType: "json",

        beforeSubmit: function() {
            jQuery(this).attr({"disabled":"disabled"});
        },
        success: function(data) {
            alert("Success");
        },
        error: function() {
            alert("Got error while accepting invitation, reload or contact administrator!");
        }
    });
}
</script>
</body>

Answer 3

这是因为您的 acceptingRequest函数仅在匿名jQuery（文档）.ready callback 中可见。

所以当你点击按钮时，acceptingRequest不可见。

保持jQuery（文档）.ready（function（）{}）

的解决方案

要解决此问题，请使用$('button.acceptinvite').on('click',acceptingRequest)

绑定回调内的处理程序

或使用匿名回调（类似这样）：

$('button.acceptinvite').on('click',function(){
    var formData = jQuery("#acceptInviteForm").serialize();
    alert(formData);
    //Etc.
});

在这两种情况下，请删除onclick="acceptingRequest();"，因为不再需要它。

另一个选择是使用全局变量使accepttingRequest在外面可见（它不是一个好的做法）：

acceptingRequest = function () {
    var formData = jQuery("#acceptInviteForm").serialize();
    alert(formData);
    //Etc.
}

现在，在jQuery（）之外可以看到acceptingRequest。准备就绪，你可以做onclick =＆＃34; acceptingRequest（）;＆＃34;

没有jQuery的解决方案（文档）.ready（function（）{}）

如果您不需要完全加载DOM（就像在这种情况下一样），您可以删除 jQuery（document）.ready（function（）{}）并且只是从头开始编写你的函数，因此按钮可以看到它们。

<script>
    function acceptingRequest() {
        var formData = jQuery("#acceptInviteForm").serialize();
        alert(formData);
        //Etc.
    }
</script>

请告诉我这是否有用。

Answer 4

在就绪状态下定义的函数可以在其自己的作用域中使用。因此，您可以在就绪状态下使用acceptingRequest（）方法。

在我看来下面的代码是事件绑定中的最佳实践：

<form id="acceptInviteForm" method="POST">
    <input type="hidden" name="accountId" value="6">
    <input type="hidden" name="operation" value="acceptinvite">

    <button class="acceptinvite btn btn-primary" id="acceptInviteButton" href="/acceptinvite" onclick="acceptingRequest();">Accept Invitation</button>
</form>

并处于准备状态：

jQuery(document).ready(function() {
function acceptingRequest() {

    var formData = jQuery("#acceptInviteForm").serialize();
    alert(formData);

    jQuery.ajax({
        type: "POST",
        url: "/acceptinvite",
        data: formData,
        dataType: "json",

        beforeSubmit: function() {
            jQuery(this).attr({"disabled":"disabled"});
        },
        success: function(data) {
            alert("Success");
        },
        error: function() {
            alert("Got error while accepting invitation, reload or contact administrator!");
        }
    });
}
$("#acceptInviteButton").on("click",acceptingRequest);
});

jQuery没有得到应用

4 个答案:

保持jQuery（文档）.ready（function（）{}）

没有jQuery的解决方案（文档）.ready（function（）{}）