jQuery的.val()在Facebox中无法工作

Question

我正在我的网站上使用Facebox (http://defunkt.github.com/facebox/)。同时，我在该网站上广泛使用jQuery。

我的问题是，在Facebox中似乎无法使用.val()函数。现在，这是作为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 外的文本框中可以正常工作。

- Shrihari

Answer 1

As Ngo Minh Nam pointed out, facebox will make a clone of the original div, so you're reading the initial value of the input field.

Here's my (ugly) workaround to make things work:

$('#input_field_id').live('keyup', function() {
  $('#input_field_id').val($(this).val());
});

This will update the input field everytime a key is depressed inside the value box.

更新：忘记那个方法吧！只需在要读取的元素ID之前添加#facebox即可。以我的例子为例：

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

请注意，您需要将这些行包装在

标签中。

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

- Pierlo Upitup

Answer 2

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

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

也许这有所帮助。

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

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

- user372551

Answer 3

前往facebox.js的第254行更改

$.facebox.reveal($(target).clone().show(), klass)

为

$.facebox.reveal($(target).show(), klass)

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

我也遇到了同样的问题。在我修复了这个问题之后，另外一些东西出了问题（facebox只会在加载div一次，关闭后似乎什么都不起作用）

- Nam Ngo

Answer 4

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

为了解决这个问题，请像Avinash所说的那样，告诉jQuery在文档准备就绪时运行您的代码。我通常使用以下方式来实现：

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

另外，为了安全起见，我也喜欢用jQuery包装我的函数并调用它们，就像这样：

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

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

- Mike Axiak

---

实际上选择器运行良好.. $（'.add-tag-form'）.submit（function（）{ 警报（“你好，世界”）; 返回假; }）;$（'.add-tag-form'）.submit（function（）{ $（“input.tags-input”）.hide（）; 返回假; }）;这些都很好.. .val（）不起作用。 - Shrihari

Answer 5

我在这个问题上卡了一整天。在我的情况下，facebox.js显示在链接243处->$.facebox.reveal($(target).html(), klass)，我将其更改为$.facebox.reveal($(target).show(), klass)，然后它就可以工作了。感谢以上所有帖子。

- Sachin Shukla

Answer 6

最后，我想更新这篇文章，我已经使用了Lightbox而不是Facebox来解决我的Facebox表单提交问题，并且第一次尝试就成功了。Lightbox有更多的选项，并且输出比Facebox更好。

- Sachin Shukla