Question

我有一个JQuery / ASP.NET项目没有按预期工作，但JSFiddle中几乎相同的代码按预期工作。我只是将一些文本作为变量传递给alert（），当你单击表单上的“Click Me”时，它会弹出。最终我将使用AJAX调用将其传递回后面的代码，但首先要做的是，所以忽略AJAX调用＆amp;功能，我还没有使用它们。

这是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>

最后，这里是the working fiddle

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

正如一个完整性检查一样，我构建了一个只有HTML的页面，其中包含了所有相同的东西（基本上拉出了第一行并删除了任何“runat”语句），我还指出了JQuery＆amp;的CDN版本。 JQuery-UI而不是指向我的本地，我得到相同的行为，没有警报。这告诉我这不是一个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或者dropdownchecklist有关。当我添加一个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资源的，因此您无需下载任何内容即可实现此功能。其他人之前必须遇到过这个问题，但是很难在网上找到任何与此特定问题有关的内容。

Answer 1

此代码：

$("#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 / ASP.NET项目无法正常工作，几乎相同的jsfiddle按预期工作

1 个答案: