jQuery的.val（）无法在Facebox中运行

Question

我正在我的一个网站上使用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" />

然后，警报框显示“Some Value”，无论我是否更改了值。

我完全被困在这里了。 代码中相同位置的.val()可以与facebox外的文本框一起使用。

Answer 1

你需要将代码包装在一个匿名函数中，比如

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

可能是这个帮助

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

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

Answer 2

转到facebox.js第254行更改
$ .facebox.reveal（$（target）.clone（）。show（），klass） to
$ .facebox.reveal（$（target）.show（），klass）

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

我有同样的问题。 在我修复之后，其他东西破了（facebox只会加载div一次，当它关闭时似乎没什么用）

Answer 3

正如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() { 

Answer 4

我被困在最后一天。 在我的情况下，facebox.js显示在链接no 243-> $ .facebox.reveal（$（target）.html（），klass）并且我将其更改为$ .facebox.reveal（$（target）.show（） ，klass），它的工作原理。 感谢上述所有帖子

Answer 5

问题是，当您的javascript代码运行时，文档尚未加载。 当你运行$（'。add-tag-form'）时，jquery看起来并没有找到任何与查询匹配的元素，因此没有任何反应。

要解决这个问题，请像Avinash所说，并告诉jQuery在文档准备好后运行代码。 我通常这样做：

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

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

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

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

Answer 6

最后我想更新这篇文章，我已经使用lightbox而不是facebox来摆脱我的facebox表单提交问题，它在第一次尝试时工作。灯箱有更多的选项，并提供比facbox更好的输出