.val() 检索默认值，而不是类型值答案

【问题标题】：.val() retrieves default value, not typed value.val() 检索默认值，而不是类型值
【发布时间】：2013-02-12 09:59:34
【问题描述】：

$(document).ready() 内部是一个.on('click') 事件处理程序。它绑定到一个空的 div，我们称之为 parentContainer。

点击处理程序如下所示：

$('#parentContainer').on('click', #buttonthatWILLexisteventually, (function() { doStuff(); }));

问题是，我最终想要使用的对象还不存在。我有另一个函数，它使用 .appendTo() jQuery 函数将输入文本字段、按钮（包括 #buttonthatWILLexisteventually）和其他内容插入到 #parentContainer 中。

我希望#buttonthatWILLexisteventually（以下称为#btwee）做的是在单击按钮时读取附加的文本字段的当前值。

当我取消所有 $(document).ready 并插入 HTML 废话并坚持使用静态 HTML 时，它在 jsfiddle 中工作。

<div class="parentContainer">
        <h2>Server Log</h2>
        <div>
            <input type="text" name="Filter" id="logfilter" value="Filter Log by [id]" />
            <input type="checkbox" id="logdebug" />
            <label for="logdebug">Display Debug Messages</label>
            <button class="changeNestedSetting" id="logclear">Clear</button>
            <button class="changeNestedSetting" id="logview">View Log</button>
        </div>
        <div id="iframediv"></div>
    </div>





  (function () {
    $(document).ready(function () {
        $('.parentContainer').on('click', '#logview',(function(){
            console.log($("#logfilter").val());
            $('<div width="100%" height="600" id="logiframe"></div>').appendTo('div#iframediv');
            var logurlparam =  { filterlog: $("#logfilter").val() };
            var logurl = "echo/html?ID=" + logurlparam["filterlog"];
            $.ajax({
                type: "GET",
                url: logurl,
                dataType: "html",
                success: function (html) {
                    $('<pre>' + html + '</pre>').appendTo('div.log');
                    $('div#logiframe').contents().find('body').append('<pre>' + html + '</pre>');
                }
            });
        }));
    });
    }());

http://jsfiddle.net/Rx3dV/15/

不幸的是，现实世界的例子似乎创造了一个 catch-22；将单击处理程序绑定到父项似乎意味着当我在该父项内部创建按钮时，单击处理程序会绑定，但我失去了动态读取文本字段内容的能力；该值始终是默认值（请参阅：http://jsfiddle.net/k5rD2/1/）。另一方面，尝试在与创建内部内容的代码相同的代码中执行点击事件意味着它不会绑定。

我在这方面看到的大多数其他线程都建议使用 .keyup() 或 .keypress() 来“猜测”输入的内容；对于一个相当简单的问题，这似乎是一个糟糕的解决方案，但到目前为止我还没有找到更好的解决方案。

更新：今晚让一位 JavaScript 程序员和我一起检查我的代码，看看我做错了什么。我设法难倒了他；我们唯一能想到的可能是 jquery-ui（页面其他地方正在使用）与它有关？

【问题讨论】：

经过一些调整后，它对我来说似乎工作得很好：jsfiddle.net/Rx3dV/25
(function () { $(document).ready(function () { ?想添加更多相同的东西吗？
这是我工作的样板...一旦我有了这个功能，我打算重构... :)
在 jsfiddle 中工作，而不是在我的 Eclipse 项目中，但我的码头服务器似乎存在一些问题......将解决这些问题，然后再回到这个问题上。 :P 谢谢@Blender
好的，所以我更新了 jQuery，确保码头一切正常，并让 JavaScript 程序员今晚和我一起检查我的代码，看看我做错了什么。我设法难倒了他；我们唯一能想到的可能是 jquery-ui（页面上其他地方正在使用）与它有关？

标签： javascript jquery forms

【解决方案1】：

所以代码正在工作...在不可见选项卡内容中的同名 div 中，这是我在 DOM 中工作之前的那个。

修复我在 jquery-ui 中使用选项卡的方式使问题消失了。

【讨论】：