javascript - 在 asp.net aspx 页面上使用 jquery 获取隐藏字段值时遇到问题

Question

我的 aspx 页面上有一个隐藏字段，我想用它来存储当前所选选项卡的 href 值(使用 Bootstrap 选项卡)。其中一个选项卡具有一些搜索功能，当搜索发生回发时，页面加载默认的事件选项卡。我已经尝试为此找到许多解决方案，但似乎都没有用。 This解决方案看起来很有希望，但隐藏字段不在 Request.Form 中。

所以，我开始弄乱我自己的解决方案，当一个选项卡被点击时，将隐藏字段的值设置为被点击选项卡的 href 属性，当按钮被点击时，将值存储在 session 中.我的问题是:我一辈子都找不到获取/设置隐藏字段值的方法。在阅读了人们在堆栈中遇到的许多类似问题后，我开始怀疑我是否在尝试获取/设置不在 DOM 中的值。

我知道我一开始很擅长使用 $(document).ready()，但我不确定在其中发生类似 $(myTab a).click() 这样的点击事件时会发生什么。在此事件中，我是否有可能尝试获取不再存在于 DOM 中的元素？我已经尝试了很多很多不同的方法，并且在尝试这样做时我总是得到 null 或 undefined 。为了结束这个咆哮/问题，我将用我一直尝试的所有不同方式发布我的代码。

<div id="maintabs" runat="server">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home" data-toggle="tab">Main</a></li>
        <li><a href="#Activity" data-toggle="tab">System Notes</a></li>
        <li><a href="#Guidelines" data-toggle="tab"><%= SBL.GetConsiderations(CompanyID) %></a></li>
        <li><a href="#Steps" data-toggle="tab">System Steps</a></li>
        <li><a href="#Accepted" data-toggle="tab">Employees Accepted</a></li>
        <li><a href="#Files" data-toggle="tab">Locate A File</a></li>
    </ul>
<div class="tab-content">
.
.
.
<div class="hidWrapper">
    <asp:HiddenField ID="hidLastTab" Value="0" runat="server" />
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#myTab a").click(function() {
            // This is basically what I'm trying to accomplish
            $("#hidLastTab").val($(this).attr("href").replace("#", ""));

            // So first test... 
            console.log($(this).attr("href").replace("#", ""))  // Console logged Files as expected, so this is good

            // My next test was then this
            console.log($("#hidLastTab").val());  // Console logged undefined

            // Next attempts
            console.log($("#hidLastTab").value);  // still undefined

            var myHidden = document.getElementById('<%= hidLastTab.ClientID %>');
            console.log(myHidden.value);  // Cannot read property 'value' of null

            var myHidden = document.getElementById('<%= hidLastTab.ClientID %>')
            console.log(document.getElementById(myHidden));  // null
            console.log(document.getElementById(myHidden).value);  // Cannot read property 'value' of null

            var myHidden = '<%= hidLastTab.ClientID %>';  // ctl00_ContentPlaceHolder1_hidLastTab
            console.log(myHidden);  // null
            console.log(document.getElementById(myHidden));  // Cannot read property 'value' of null
            console.log(document.getElementById(myHidden).value); // Cannot read property 'val' of null

            // per one recommendation, a div wrapper
            console.log($(".hidWrapper input[type=hidden]").val());  // undefined

            // Another recommendation
            console.log($("[id$=_hidLastTab").attr['value']); // undefined
        })
    })
<script>

如果有人能在这里帮助我，那就太棒了，因为这让我发疯!我什至尝试用文本框做同样的事情，因为至少我知道我应该能够为此获取 ElementById(我真的不知道隐藏字段是如何工作的，而且因为我在标记中找不到它，所以我不是' t 100% 确定 getElementById 会像其他元素一样工作)，甚至在执行 getElementById("txtNotes") 和 getElementById('<%= txtNotes.ClientID %>') 时文本框也返回 null。这让我相信，这可能是当时 DOM 中不存在的元素的问题。

提前致谢!安迪

Answer 1

$(myTab a).click(function() 应该是 $("#myTab a").click(function() 吗？我用 Jquery 1.11.3 尝试了你的解决方案，它按预期工作。如果你启动检查器在 Google Chrome 中，您可以看到点击事件永远不会绑定(bind)到那些 a 元素，因为 JQuery 找不到 $(myTab a)。