jquery - Jquery/ASP.NET 项目无法正常工作，几乎相同的 jsfiddle 按预期工作

Question

我有一个没有按预期工作的 JQuery/ASP.NET 项目，但是 JSFiddle 中几乎相同的代码按预期工作。我只是将一些文本作为变量传递到 alert() 中，当您单击表单上的“Click Me”时应该会弹出它。最终，我将使用 AJAX 调用将其传递回后面的代码，但首先要做的就是忽略 AJAX 调用和函数，我还没有使用它们。

这是 JS（在下面的 ASP 中引用为“OnlineRMA.js”：

$("#button").on('click', function () {
var test = $("#SBE_Services").val();
alert(test);
//asyncServerCall(test);
}); 

function asyncServerCall(userid) {
$.ajax
(
    {
        url: 'WebForm1.aspx/GetData',
        type: "POST",
        data: "{'userid':" + userid + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            alert(data.d);
        }
    }
);
}
$(document).ready(function () {
$("#SBE_Services").dropdownchecklist();
});

这是 ASPX：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryAjaxExample.WebForm1" %>

<!DOCTYPE html>
<script src="Scripts/jquery-1.9.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="Scripts/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script src="Scripts/onlinerma.js" type="text/javascript"></script>

<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <label for="SBE_services">Requested Services</label>
        <select id="SBE_Services" multiple="multiple">
            <optgroup label="Calibration">
                <option>Temperature</option>
                <option>Conductivity</option>
                <option>Pressure</option>
                <option>Dissolved Oxygen</option>
                <option>pH</option>
            </optgroup>
            <optgroup label="Repairs">
                <option>O-Ring Replacement &amp; Inspection</option>
                <option>Hydrostatic Test</option>
                <option>Diagnose &amp; Repair Problems</option>
                <option>Replace Anti-Foulant Devices</option>
                <option>Download Data From Instrument</option>
            </optgroup>
            <optgroup label="Third Party Sensors">
                <option>Fluorometer</option>
                <option>Transmissometer</option>
                <option>Turbidity</option>
                <option>SUNA</option>
                <option>PAR</option>
            </optgroup>
        </select>
        <input type="button" id="button" value="Click me" />
    </div>
</form>
</body>
</html>

最后，这是工作小提琴

在小提琴上，单击“请求的服务”右侧并选择一些（无论多少，只要您至少选择了一个，如果您不选择，则还没有错误处理）。然后点击“点击我”。您应该会收到一个 JS 警报，列出您的选择。在 ASP 项目中这不起作用，我不明白为什么。唯一的区别是稍微定制的 JQuery-UI，但我认为这不是问题所在。dropdownchecklist 的东西正在工作，所以它告诉我它在外部文件中看到了 JS，我只是不知道为什么我没有收到 JS 警报。

作为一个健全性检查，我构建了一个纯 HTML 页面，其中包含所有相同的内容（基本上拔出了第一行并删除了所有“runat”语句），我还指出了 JQuery 和 JQuery-UI 的 CDN 版本指向我当地的，我得到了同样的行为，没有警报。这告诉我这不是 ASP 问题，可能不是 JQuery 问题，这是我缺少的其他东西。我什至将警报更改为： alert("test");无济于事。我错过了什么？也许我的路径配置错误？这让我发疯！

编辑：今天早上我使用来自 JQuery 的 CDN 引用重建了 HTML 文件，现在它按预期工作。这是HTML：

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script src="Scripts/onlinerma.js" type="text/javascript"></script>

</head>
<body>
<form id="form1">
    <div>
        <label for="SBE_services">Requested Services</label>
        <select id="SBE_Services" multiple="multiple">
            <optgroup label="Calibration">
                <option>Temperature</option>
                <option>Conductivity</option>
                <option>Pressure</option>
                <option>Dissolved Oxygen</option>
                <option>pH</option>
            </optgroup>
            <optgroup label="Repairs">
                <option>O-Ring Replacement &amp; Inspection</option>
                <option>Hydrostatic Test</option>
                <option>Diagnose &amp; Repair Problems</option>
                <option>Replace Anti-Foulant Devices</option>
                <option>Download Data From Instrument</option>
            </optgroup>
            <optgroup label="Third Party Sensors">
                <option>Fluorometer</option>
                <option>Transmissometer</option>
                <option>Turbidity</option>
                <option>SUNA</option>
                <option>PAR</option>
            </optgroup>
        </select>
        <input type="button" id="button" value="Click me" />
    </div>
</form>
</body>
</html>

我还用一个按钮构建了另一个页面，该按钮使用纯 JS 而不是 JQuery，它在 ASP.NET 页面内完美运行，因此它与 JQuery 或 JQuery-UI 或下拉列表有关。当我添加一个 JQuery 选择器而不是函数调用时，它停止工作。我将开始尝试找出哪些 JQ 的东西是罪魁祸首。

编辑2：

我用一个简单的输入按钮和相应的 JQuery 选择器构建了一个准系统 ASP.NET 项目来响应onclick事件，因此任何想要帮助解决这个问题的人都有一个简单的方法。启动一个新的 ASP.NET 项目，接受默认名称，将网页添加到项目（也接受默认名称），然后将其设为起始页。这是页面的代码，我没有更改其他文件：

编辑 3 将约翰的建议纳入答案，现在可以使用：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1-vsdoc.js' type='text/javascript'></script>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://dropdown-check-list.googlecode.com/svn/trunk/doc/ui.dropdownchecklist-1.4-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#button").on('click', function() {
        alert("You clicked the button");
    });
});
</script>
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="button" value="Click Me"/>
    </div>
    </form>
</body>
</html>

所有与 JQuery 相关的<script>调用都是针对各种 CDN 资源的，因此您无需下载任何内容即可完成这项工作。以前肯定有人遇到过这个问题，但是在网络上很难找到任何能说明这个特定问题的东西。

score 1 · Accepted Answer

这段代码：

$("#button").on('click', function () {
var test = $("#SBE_Services").val();
alert(test);
//asyncServerCall(test);
});

应该在你的 $(document).ready(function(){});

像这样：。

$(document).ready(function(){

    $("#button").on('click', function () {
    var test = $("#SBE_Services").val();
    alert(test);
    //asyncServerCall(test);
    }); 


    $("#SBE_Services").dropdownchecklist();
});

jquery - Jquery/ASP.NET 项目无法正常工作，几乎相同的 jsfiddle 按预期工作

1 回答 1

Related

Reference