Javascript 没有应用jQuery

我正在开发通知系统，并将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>

因此，当用户单击按钮时，即使不显示

警报也无法工作

但是当我在chrome控制台上插入jquery函数时，事情变得更加有趣，视图被加载，按钮开始正常工作，并且显示警报

我不明白不让事情发生的道理
 我认为您是在documentready上定义函数acceptingRequest（），但实际上并没有调用它。尝试添加：

acceptingRequest();

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

// 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();
});

我认为您是在documentready上定义acceptingRequest（）函数，但实际上并没有调用它。尝试添加：

acceptingRequest();

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

// 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();
});

因为这个字符串

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

因为这个字符串

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

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

因此，当您单击按钮时，acceptingRequest不可见

保持jQuery（document）.ready（function（）{}）的解决方案
要解决此问题，请使用
$（'button.acceptinvite'）在回调中绑定处理程序。在（'click'，acceptingRequest）

或者使用匿名回调（类似以下内容）：

在这两种情况下，删除
onclick=“acceptingRequest（）；”
，因为不再需要它

另一个选项是使用全局变量使acceptingRequest在外部可见（无论如何，这不是一个好做法）：

现在，acceptingRequest在jQuery（）外部可见。准备就绪，您可以执行onclick=“acceptingRequest（）；”

没有jQuery（document）.ready（function（）{}）的解决方案
如果不需要完全加载DOM（如本例中所示），可以删除它
jQuery（document）.ready（function（）{}），只需从头部编写函数，这样按钮就可以看到它们

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


函数acceptingRequest（）{
var formData=jQuery（“#acceptInviteForm”）.serialize（）；
警报（formData）；
//等等。
}

让我知道这是否有用。
这是因为您的acceptingRequest函数仅在匿名jQuery（document）中可见。ready callback

因此，当您单击按钮时，acceptingRequest不可见

保持jQuery（document）.ready（function（）{}）的解决方案
要解决此问题，请使用
$（'button.acceptinvite'）在回调中绑定处理程序。在（'click'，acceptingRequest）

或者使用匿名回调（类似以下内容）：

在这两种情况下，删除
onclick=“acceptingRequest（）；”
，因为不再需要它

另一个选项是使用全局变量使acceptingRequest在外部可见（无论如何，这不是一个好做法）：

现在，acceptingRequest在jQuery（）外部可见。准备就绪，您可以执行onclick=“acceptingRequest（）；”

没有jQuery（document）.ready（function（）{}）的解决方案
如果不需要完全加载DOM（如本例中所示），可以删除它
jQuery（document）.ready（function（）{}），只需从头部编写函数，这样按钮就可以看到它们

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


函数acceptingRequest（）{
var formData=jQuery（“#acceptInviteForm”）.serialize（）；
警报（formData）；
//等等。
}

让我知道这是否有用。
在就绪状态下定义的函数可以在它自己的作用域中使用。因此，您可以在就绪状态下使用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>

在就绪状态下定义的函数可以在它自己的作用域中使用，所以可以在就绪状态下使用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>

从
$（文档）中删除函数。准备就绪
，并将其包装在
标题中
。。从
$（文档）中删除函数。准备就绪
，并将其包装在
标题中
。。当DOM准备好后，这不会尝试调用
acceptingRequest
函数吗。不是关于用户交互，我相信这是OP想要的。是的，这会在DOM准备好后立即触发AJAX调用，我认为OP想要的。否则，acceptingRequest（）行应该被包装在事件监听器中。请不要在DOM就绪后立即尝试调用
acceptingRequest
函数。不是关于用户交互，我相信这是OP想要的。是的，这会在DOM准备好后立即触发AJAX调用，我认为OP想要的。否则，acceptingRequest（）行应该包装在事件监听器中听起来不错@David！如果这个答案对你有帮助，请随时检查，因为它听起来不错@David！如果这个答案对你有帮助，请随时检查它是否正确