.val () jQuery не работает в Facebox - PullRequest
Новая
       24

.val () jQuery не работает в Facebox

3 голосов
/ 22 сентября 2010

Я использую Facebox (http://defunkt.github.com/facebox/) на одном из моих сайтов. Также я активно использую jQuery на сайте.

Моя проблема в том, что функция .val () не работает внутри facebox. Теперь это DIV, который отображается как facebox: 

<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() в той же позиции в коде отлично работает с текстовыми полями за пределами лицевой панели.

Ответы [ 6 ]

2 голосов
/ 08 апреля 2011

Как указал Нго Минь Нам, facebox сделает клон оригинального div, поэтому вы читаете начальное значение поля ввода.

Вот мой (уродливый) обходной путь, чтобы сделатьвсе работает: 

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

Это будет обновлять поле ввода при каждом нажатии клавиши внутри поля значения.

ОБНОВЛЕНИЕ : забудьте об этом!просто добавьте #facebox перед идентификатором элемента, который вы хотите прочитать.В моем примере: 

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

Обратите внимание, что вы должны заключить эти строки в 

    $(document).bind('reveal.facebox', function() {
2 голосов
/ 07 октября 2010

Перейдите на страницу facebox.js 254, измените
$. Facebox.reveal ($ (target) .clone (). Show (), klass) на
$.facebox.reveal ($ (target) .show (), klass)

Facebox клонирует предоставленный вами div, а не показывает его.Когда вы вызываете .val (), он возвращает значение исходного div, но модифицированный div (с которым взаимодействует пользователь) на самом деле является клонированным div.

У меня такая же проблема.После того, как я исправил это, что-то еще сломалось (facebox загрузит div только один раз, когда он закрыт, кажется, ничего не работает)

2 голосов
/ 22 сентября 2010

вам нужно обернуть свой код в анонимную функцию, например 

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

, может быть, эта справка 

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

, пожалуйста, дайте мне знать, если проблемавсе еще существует

1 голос
/ 01 ноября 2012

Я застрял на этом последнем дне.В моем случае facebox.js показывался по ссылке № 243-> $ .facebox.reveal ($ (target) .html (), klass), и я меняю его на $ .facebox.reveal ($ (target) .show ()., класс) и все работает.Спасибо за все вышеперечисленные сообщения

1 голос
/ 22 сентября 2010

Проблема в том, что к моменту запуска вашего кода JavaScript документ еще не был загружен.К тому времени, когда вы запускаете $ ('. Add-tag-form'), jquery ищет и не находит никаких элементов, соответствующих запросу, и поэтому ничего не происходит.

Чтобы это исправить, сделайте, как говорит Avinash,и скажите jQuery запустить ваш код, когда документ будет готов.Я обычно делаю это с: 

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

Еще одна вещь, для безопасности я также люблю оборачивать свои функции и вызывать их с помощью jquery, например: 

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

Таким образом, если кто-топереопределяет $ name, скрипт все еще работает, и я все еще могу использовать ярлык $.

0 голосов
/ 08 мая 2013

наконец-то я хочу обновить этот пост, в котором я использовал лайтбокс вместо фейсбокса, чтобы избавиться от проблемы с отправкой формы фейсбокса, и это сработало при первой попытке. У лайтбокса есть еще несколько опций, которые дают вывод лучше, чем фейсбокс

...