jConfirm 来自注入的 HTML 元素的访问值答案

【问题标题】：jConfirm access value from injected HTML elementjConfirm 来自注入的 HTML 元素的访问值
【发布时间】：2012-07-24 11:52:24
【问题描述】：

我有这段代码，它制作了一个带有多个输入的精美 jQuery 警报框：

//jConfirm( message, [title, callback] )
    $('#buttonNew').click(function(){
             jConfirm('<form><input id="postTitle" type="text"/><br/><textarea id="postBody"></textarea></form>', 'New Post',
             function(r){if(r==true){
                    alert($('#postTitle').val()); //Expecting the input value but getting "undefined"
                                  }
                         });
                         })

当我尝试使用输入到输入中的值（例如使用 alert() 进行测试，如上所示）时，我得到“未定义”。如何从回调函数中访问注入的 HTML 输入的这些值？

【问题讨论】：

标签： jquery

【解决方案1】：

您发布的代码在语法上似乎是正确的，并且回调中的条件语句显然是正确的（因此发出警报） - 这一定意味着它无法检索元素的值。

我很确定这是因为 jQuery 在文档 (DOM) 准备就绪时被初始化，所以注入的 HTML 在那个时候实际上并不存在 - 它稍后被注入到 DOM 中；动态的。

我似乎找不到任何使用类似 HTML 表单的 jConfirm 示例；所以我会冒险并假设这就是问题所在。

the jQuery website 对此问题进行了很好的讨论。您基本上需要重新加载 DOM，以便 jQuery 了解它正在使用的所有元素。将 HTML 动态嵌入页面时可能会导致其他问题，在涉及事件处理程序的情况下，您可以使用 $.live() (as demonstrated here) 但是访问这些元素的值似乎要复杂得多！

如果是这种情况，那么一个简单的小解决方法就是做这样的事情......

var title; //in global scope.. yucky!

/* set a -live- event listener to fire whenever 
** postTitle is modified; dumping the value in to
** our global var */
$('#postTitle').live('change',function(r){
    title = $(this).val();
});

/* then just access the 'title' var */

所有这一切只是有一个事件监听器，它附加到任何 id 为 'postTitle' 的元素 无论它们何时被插入到 DOM 中 .每当更改“postTitle”时，都会调用此事件侦听器并将新值转储到全局变量中；即 - 允许您在范围内的任何地方访问它 - 所以您的整个代码库。（我通常不提倡全局变量 - 但在这种情况下，它更像是概念证明/故障排除步骤；））

尽管这可能不是问题，请尝试看看您是否可以通过开发者控制台访问该值。（萤火虫等）然后尝试检查不同的浏览器，看看它是否是一种普遍的行为。我认为最有可能的问题是 DOM。在这种情况下，如果不使用全局变量，我想不出很多方法来解决它。（嗯，没有简单的方法）

【讨论】：