jQuery 的 .val() 在 Facebox 中不起作用答案

【问题标题】：jQuery's .val() not working in FaceboxjQuery 的 .val() 在 Facebox 中不起作用
【发布时间】：2011-04-15 20:13:20
【问题描述】：

我在我的一个网站上使用 Facebox (http://defunkt.github.com/facebox/)。我也在网站上广泛使用 jQuery。

我的问题是 .val() 函数似乎在 facebox 中不起作用。现在，这是显示为 facebox 的 DIV：

<div id="edit-tags" style="display: none;">
  <script type="text/javascript">   
   $('.add-tag-form').submit(function(){
    alert($('input.tags-input').val());
    return false;
   });
  </script>

  <form class="add-tag-form">
   <input type="text" name="tags-input" class="tags-input" />
   <input type="submit" class="small-button" value="Add Tag" />
  <form>
</div>

现在，问题是input.tags-input 的值没有显示在警告框中。它显示为空。

更糟糕的是，jQuery 选择确实有效。也就是说，$('input.tags-input').hide() 工作得很好。

更糟糕的是，.val() 使用初始值。也就是说，如果我使用这个：

<input type="text" name="tags-input" class="tags-input" value="Some value" />

然后，无论我是否更改值，警报框都会显示“某些值”。

我完全被困在这里。代码中相同位置的.val() 可以很好地与facebox 之外的文本框配合使用。

【问题讨论】：

标签： jquery facebox

【解决方案1】：

您需要将代码包装在匿名函数中，例如

$(function() { ... });
       or
$(document).ready(function() { ... });

可能是这个帮助的

$(function() {
   $('.add-tag-form').submit(function(){
      alert($('input.tags-input').val());
      return false;
   });
});

如果问题仍然存在，请告诉我

【讨论】：

【解决方案2】：

问题在于，当您的 javascript 代码运行时，该文档尚未加载。当您运行 $('.add-tag-form') 时，jquery 会查找并没有找到任何与查询匹配的元素，因此什么也不会发生。

要解决此问题，请按照 Avinash 的说明进行操作，并告诉 jQuery 在文档准备好时运行您的代码。我通常这样做：

$(document).ready(function(){
    ...
});

另一件事，为了安全起见，我也喜欢包装我的函数并用 jquery 调用它们，如下所示：

(function ($){
   $(document).ready(function() {
       ...
   });
})(jQuery);

这样，如果有人覆盖了 $ 名称，脚本仍然有效，我仍然可以使用 $ 快捷方式。

【讨论】：

实际上选择器工作正常.. $('.add-tag-form').submit(function(){ alert("hello world"); return false; }); $('.add-tag-form').submit(function(){ $("input.tags-input").hide(); return false; });这些工作正常.. .val() 不起作用。

【解决方案3】：

转到 facebox.js 第 254 行，将
$.facebox.reveal($(target).clone().show(), klass) 更改为
$ .facebox.reveal($(target).show(), klass)

Facebox 正在克隆您提供的 div，而不是实际显示它。当你调用 .val() 时，它会返回原始 div 的值，但修改后的 div（用户与之交互）实际上是一个克隆的 div。

我也有同样的问题。在我修复它之后，其他东西坏了（facebox只会加载一次div，当它关闭时似乎没有任何工作）

【讨论】：

【解决方案4】：

正如 Ngo Minh Nam 所指出的，facebox 将复制原件 div，所以你正在阅读最初的输入字段的值。

这是我的（丑陋的）解决方法一切正常：
$('#input_field_id').live('keyup', function() {
  $('#input_field_id').val($(this).val());
});
这将更新输入字段每次在里面按下一个键值框。

更新：算了！只需在要读取的元素的 id 之前附加 #facebox 即可。在我的例子中：

$('#facebox #input_field_id').val();

还请注意，您必须将这些行包含在

    $(document).bind('reveal.facebox', function() {

【讨论】：

【解决方案5】：

我从前一天就被卡住了。在我的情况下，facebox.js 显示在链接号 243-> $.facebox.reveal($(target).html(), klass) 我把它改成 $.facebox.reveal($(target).show(), klass) 它有效。感谢以上所有帖子

【讨论】：

【解决方案6】：

最后我想更新这篇文章，我使用 lightbox 而不是 facebox 来摆脱我的 facebox 表单提交问题，它在第一次尝试时就起作用了。light box 有更多的选择，并且比 facbox 提供更好的输出

【讨论】：