JQuery/Javascript 在点击时不触发

JQuery/Javascript on click not firing

本文关键字：Javascript JQuery      更新时间：2023-09-26

有人可以向我解释为什么我的javascript不起作用吗？我正在尝试在我的网站上设置隐藏字段的值。该脚本已工作，但由于 som 原因它不再工作。
这是 JavaScript

<script>
    $('#checkDk').on('change', function () {
        $('#MainContent_hiddenTargetDk').val($(this).prop("checked") ? $(this).val() : "");
        console.log($("#MainContent_hiddenTargetDk").val());
    });
</script>

这是按钮。

<label runat="server" id="dk" class="btn btn-default">
    <input runat="server" id="checkDk" type="checkbox" value="208" onselect="getvalue()" autocomplete="off">
    Denmark
</label>

这是隐藏的领域：

<input type="hidden" id="hiddenTargetDk" runat="server" />

$(#hiddenTargetDk)不$(#MainContent_hiddenTargetDk) 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input type="hidden" id="hiddenTargetDk" runat="server" />
<label runat="server" id="dk" class="btn btn-default">
                            <input runat="server" id="checkDk" type="checkbox" value="208" onselect="getvalue()" autocomplete="off">
                            Denmark
                        </label>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script>
    $('#checkDk').on('change', function () {
        $('#hiddenTargetDk').val($(this).prop("checked") ? $(this).val() : "");
        console.log($("#hiddenTargetDk").val());
    });
</script>
</body>
</html>

您必须

使用其id将值设置为隐藏的input，这#hiddenTargetDk不是#MainContent_hiddenTargetDk

演示

j查询：

$('#checkDk').on('change', function () {
        $('#hiddenTargetDk').val($(this).prop("checked") ? $(this).val() : "");
        console.log($("#hiddenTargetDk").val());
    });

您正在绑定changed事件并在click上等待它。我确实认为这不是它应该的工作方式。

试试这个：

 $('#checkDk').on('click', function () {
    $('#MainContent_hiddenTargetDk').val($(this).prop("checked") ? $(this).val() : "");
    console.log($("#MainContent_hiddenTargetDk").val());
});

你的问题是其他答案的组合，以及一个秘密的后端怪癖与 ASP.NET。

ASP.NET 正在更改隐藏字段的 ID。 您需要将 ClientIDMode="Static" 属性添加到要使用 JQuery 的字段中，如下所示：

<label runat="server" id="dk" class="btn btn-default">
    <input runat="server" id="checkDk" type="checkbox" value="208" onselect="getvalue()" autocomplete="off" clientidmode="static">
    Denmark
</label>
<input type="hidden" id="hiddenTargetDk" runat="server" clientidmode="static" />

然后，您可以使用 JQuery 简单地识别您的对象：

$('#checkDK')

和

$('#hiddenTargetDK')

我想我会这样写 JQuery：

<script>
    $('#checkDk').click(function () {
        $('#hiddenTargetDk').val($(this).prop("checked") ? $(this).val() : "");
        console.log($("#hiddenTargetDk").val());
    });
</script>

此功能已添加到 .NET 4.0 中，我相信之后。 .NET 框架使用 runat="server" 属性重命名所有对象的 ID，IIS、IIS Express 和每个不同版本的 IIS 配置可能会以不同的方式重命名它们，这就是您的代码中断的原因。 将客户端 ID 模式设置为静态可确保 ASP.NET 不会重命名您的 ID，而是使用另一个字段来保存其"真实名称"。 祝你好运！

相关文章：