0

使用Calling Jquery inside / inside a Shadowbox的答案 （感谢 Rob Grzyb 和 kannan！），我能够在我的 Drupal 站点上的 Shadowbox 中触发我的 jQuery，但是，我无法获得其中的一部分功能：

我的 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 中工作？谢谢！

4

1 回答 1

0

您在创建 shadowbox 时正在复制内容，因此您有两个下拉列表副本。val()返回第一个元素的值，在这种情况下，它不是影子框中的那个。

尝试这个：

在设置影子盒的代码中：

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);
});
于 2013-08-28T14:28:40.587 回答