Question

我在Flexsider和其中一张幻灯片中遇到了一个不寻常的问题。表单中有一些单选按钮，除了容器的一些div之外别无其他。单击单选按钮会导致按钮周围的光标轮廓，因此它正在响应，但不会进行检查。我确实尝试使用javascript调用来设置属性。通过，它成功设置单选按钮，但退出该功能后，单选按钮被重置。我似乎无法在这里或其他地方找到任何类似的问题，我完全被大惊小怪。

表单内容通过ajax加载。我注意到Flexslider会创建第一张和最后一张幻灯片的克隆，并且当ajax内容加载到幻灯片中时克隆会更新。我重新安排了我的幻灯片，因此没有克隆表格，但仍然无法检查单选按钮。但是，在Firebug中，我将checked属性设置为true（在Watch面板中使用jquery），此时按钮仍保持选中状态。尝试检查/取消选中导致无效，而我通过Firebug设置的属性的按钮仍然存在。

修改：我添加了一个文本字段，但没有问题。

以下是HTML。老实说，javascript可以忽略不计，因为它只是获取表单内容的ajax请求。正在使用的Javascript是视频的jquery，flexslider和flowplayer。表格位于数据幻灯片2中，正式位于第二个，因为第一个是克隆。

<section class="slider">
    <div class="flexslider" id="mainSlider">

        <div class="flex-viewport" style="overflow: hidden; position: relative;">
            <ul class="slides" style="width: 1000%; margin-left: -3486px;">
                <li data-slide="2" data-type="Quiz" data-id="6" class="clone" style="width: 1162px; float: left; display: block;">

                    <div class="quiz" data-id="1">
                        <div class="quizDescription">

                        </div>
                        <div class="quizContent" data-id="1">
                            <div style="max-width: " data-id="1" class="question">
                                <div class="questionText">Is TRUE true?<br></div>
                                    <span id="CourseQuizAnswer"><input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2"> 
                                        <label for="CourseQuizAnswer_0" style="display:inline">True</label><br>
                                        <input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_1" value="3">
                                        <label for="CourseQuizAnswer_1" style="display:inline">False</label>
                                    </span>
                                </div>
                            </div>
                        <div class="well">
                            <input type="button" value="Submit" name="yt0" onclick="submitQuestionAnswer(this);" class="btn btn-primary btn-med">
                        </div>
                    </div>

                </li>
                <li data-slide="0" data-type="Video" data-id="2" style="width: 1162px; float: left; display: block;" class="">

                    <div class="minimalist video-slide flowplayer is-mouseout is-ready is-paused" data-video_id="1" id="mainPlayer">
                        <video tabindex="0" class="fp-engine">
                            <source src="http://stream.flowplayer.org/bauhaus/624x260.webm" type="video/webm"></source>
                        </video>
                        <div class="fp-ratio" style="padding-top: 56.25%;"></div>      <div class="fp-ui">         <div class="fp-waiting"><em></em><em></em><em></em></div>         <a class="fp-fullscreen"></a>         <a class="fp-unload"></a>         <p class="fp-speed"></p>         <div class="fp-controls">            <a class="fp-play"></a>            <div class="fp-timeline" style="">               <div class="fp-buffer" style="width: 100%;"></div>               <div class="fp-progress"></div>            </div>            <div class="fp-volume">               <a class="fp-mute"></a>               <div class="fp-volumeslider" style="">                  <div class="fp-volumelevel" style="width: 43%;"></div>               </div>            </div>         </div>         <div class="fp-time">            <em class="fp-elapsed">00:00</em>            <em class="fp-remaining">00:40</em>            <em class="fp-duration">00:40</em>         </div>         <div class="fp-message"><h2></h2><p></p></div>      </div><a href="http://flowplayer.org" target="_top"></a></div>
                </li>
                <li data-slide="1" data-type="Content" data-id="5" style="width: 1162px; float: left; display: block;">
                    Segment 2            
                </li>
                <li data-slide="2" data-type="Quiz" data-id="6" class="flex-active-slide" style="width: 1162px; float: left; display: block;">
                    <div class="quiz" data-id="1">
                        <div class="quizDescription">

                        </div>
                        <div class="quizContent" data-id="1">
                            <div style="max-width: " data-id="1" class="question">
                                <div class="questionText">
                                    Is TRUE true?<br>
                                </div>
                                <span id="CourseQuizAnswer">
                                    <input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2"> 
                                    <label for="CourseQuizAnswer_0" style="display:inline">True</label><br>
                                    <input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_1" value="3"> 
                                    <label for="CourseQuizAnswer_1" style="display:inline">False</label>
                                    </span>
                                </div>
                            </div>
                        <div class="well">
                            <input type="button" value="Submit" name="yt0" onclick="submitQuestionAnswer(this);" class="btn btn-primary btn-med">
                        </div>
                    </div>

                </li>
                <li data-slide="0" data-type="Video" data-id="2" style="width: 1162px; float: left; display: block;" class="clone">

                    <div class="minimalist video-slide" data-video_id="1" id="mainPlayer">
                        <video tabindex="0">
                            <source src="http://stream.flowplayer.org/bauhaus/624x260.webm" type="video/webm"></source>
                        </video>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</section>

有没有人有任何见解？提前谢谢！

Answer 1

您的单选按钮有id个重复项。删除重复的id并重试。如果它仍然不起作用，请告诉我。

例如：

<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2">

与

相同

<input type="radio" name="CourseQuizAnswer" id="CourseQuizAnswer_0" value="2">

并且它在页面上存在两次。

我知道为什么你可能认为你的id是独一无二的：你因为他们所关心的问题而使它们独一无二。但是，您忘了在页面上使它们独一无二。问题是id都在全局页面范围内，无论它们在何处被声明。

祝你好运！：）

Answer 2

flexslider创建每张幻灯片的镜像副本，以便在滚动浏览最后一张幻灯片时创建连续性幻觉。这些是使用类名＆＃34; clone＆＃34;创建的。您可以尝试在使用jQuery提交之前禁用表单：

$(".clone input").prop("disabled", true);

Flexslider和内容与表单

2 个答案: