0

里面$(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（页面上其他地方正在使用它）与它有关吗？

4

1 回答 1

0

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

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

于 2013-02-12T01:59:34.707 回答