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

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> 

我怎么能修改此代码，以便它工作在太极拳？谢谢！

Answer 1

当您创建shadowbox时，您正在复制内容，因此您有两份下拉列表。 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); 
});