3

我在我的一个网站上使用 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()同一位置可以很好地与面框外的文本框配合使用。

4

6 回答 6

2

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

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

可能是这个帮助

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

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

于 2010-09-22T16:26:30.797 回答
2

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

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

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

于 2010-10-07T05:10:36.430 回答
2

正如 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() {
于 2011-04-08T11:32:25.973 回答
1

我从最后一天就被困在上面了。在我的情况下，facebox.js 在链接号 243-> $.facebox.reveal($(target).html(), klass) 上显示，我将其更改为 $.facebox.reveal($(target).show() ，类），它的工作原理。感谢以上所有帖子

于 2012-11-01T06:47:51.083 回答
1

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

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

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

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

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

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

于 2010-09-22T16:33:22.853 回答
0

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

于 2013-05-08T07:27:02.483 回答