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更好的輸出