2013-02-07 107 views
0

$(document).ready()的内部是.on('click')事件处理程序。它绑定到一个空的div,我们将其称为parentContainer。.val()检索默认值,不输入值

单击处理程序是这样的:

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

的问题是,目前还不存在我想最终与工作的对象。我有另一个使用.appendTo()jQuery函数插入输入文本字段,按钮(包括#buttonthatWILLexistevent)和其他东西到#parentContainer中的另一个函数。

我想#buttonthatWILLexisteventually(nowforth #btwee)要做的是读取当前附加的文本字段的值,当点击按钮时。

它可以在jsfiddle中工作,当我删除所有$(document).ready并插入HTML废话并且仅仅使用静态HTML。

<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(它在页面的其他地方使用)与它有什么关系?

+1

它似乎工作很好,我经过一些调整:http://jsfiddle.net/Rx3dV/25/ – Blender

+1

'(function(){$(document).ready(function(){'?want to添加更多相同的东西? – Popnoodles

+0

这是我正在工作的样板文件...一旦我有这个功能工作,我打算重构... :) – hewhocutsdown

回答

0

因此代码工作...在同一名称的div中隐藏选项卡的内容,这是在我正在处理的DOM之前。

解决我在jquery-ui中使用标签的方式使问题消失。