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

Question

Используя ответ из Calling Jquery внутри / внутри Shadowbox (спасибо Rob Grzyb и kannan!), Я смог запустить jQuery из Shadowbox на моем сайте Drupal, однако я не могу получить одну его часть для функция:

У меня есть форма в Shadowbox, и я использую.val() для определения значения поля выбора (и для целей тестирования, отображая это значение в окне предупреждения). Когда я нажимаю кнопку "Отправить" и предупреждение срабатывает, предупреждение всегда считывает первое значение (красное), даже если я выбрал другое значение (например, зеленое). На обычной странице он работает как положено, и предупреждение считывает правильное значение.

Пример кода:

<div class="color-form" style="display: none;">
  <h3>What's Your Favorite Color?</h3>
  <form class="color">
    <select name="colorurl" class="colorurl">
      <option value="red">Red</option>
      <option value="green">Green</option>
      <option value="blue">Blue</option>
    </select>
    <br />
    <input class="button" type="submit" value="Submit">
  </form>
  <script type="text/javascript">
    jQuery(document).ready(function($){
      $('body').on('click', '.color .button', function(e) {
        e.preventDefault();

        var colorurl = $('.colorurl').val();
        alert(colorurl);
      });
    });
  </script>
</div>
<script type="text/javascript">
  jQuery(document).ready(function($){
    $('a.form').click(function () {
      var thisContent = $('.color-form').html();
      Shadowbox.open({
        content: thisContent,
        player: 'html',
        displayNav: false,
        height: 350,
        width: 350
      });
    });
  });
</script>
<a class="form">Link to Form</a>

Как я могу изменить этот код, чтобы он работал в Shadowbox? Спасибо!

Answer 1

При создании теневого ящика вы дублируете содержимое, поэтому у вас есть две копии раскрывающегося списка. val() возвращает значение первого элемента, который в этом случае не является тем в shadowbox.

Попробуй это:

В вашем коде, который устанавливает shadowbox:

var thisContent = $('<div class="shadowbox-color-form"></div>').append($('.color-form').html())[0].outerHTML;

В коде, который обрабатывает клик:

$('body').on('click', '.shadowbox-color-form .button', function(e) {
    e.preventDefault();

    var colorurl = $('.shadowbox-color-form .colorurl').val();
    alert(colorurl);
});