Question

使用Calling Jquery within / inside a Shadowbox 的答案（感谢Rob Grzyb和kannan！），我能够从我的Drupal网站上的Shadowbox中获取jQuery，但是，我是无法使其中的一部分发挥作用：

我的Shadowbox中有一个表单，我正在使用.val（）来确定select字段的值（并且出于测试目的，在警告框中显示该值）。当我单击“提交”按钮并触发警报时，即使我选择了不同的值（如绿色），警报也会始终读取第一个值（红色）。在常规页面上，它按预期工作，警报读取正确的值。

示例代码：

<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的代码中：

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);
});

jQuery .val（）在Shadowbox中不起作用

1 个答案: