仅触发一次点击

Question

有一个测验插件，单击“下一步”按钮后，提交答案。 我希望在单击答案后立即触发它。 我设法触发了一次点击，但是它点击了所有问题。 如何使其仅单击一次？

我的密码

$(".wpProQuiz_questionListItem").each(function(){
   $(this).find("label").click(function(event){
      $(this).find(".wpProQuiz_questionInput").prop('checked', true);
      $(this).parents().find(".wpProQuiz_button").click();
   });
});

html

<ol class="wpProQuiz_list">
   <li class="wpProQuiz_listItem">
      <ul class="wpProQuiz_questionList">
         <li class="wpProQuiz_questionListItem"> <!-- that's the answer -->
            <label>
                <input class="wpProQuiz_questionInput" type="radio" name="question_1_1" value="1"> <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/08/76/63/bahia-de-caraquez.jpg" class="questionimage">                                   
            </label>
            <input name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;" type="button">
         </li>
      </ul>
      <input type="button" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;">
   </li>
   <li class="wpProQuiz_listItem">Same code goes here</li>
</ol>

Answer 1

问题是您正在所有父<ol class="wpProQuiz_list">中搜索按钮，包括元素<ol class="wpProQuiz_list"> ，该元素返回列表中的所有按钮。 因此，您必须定义要为其找到按钮的父项。

长话短说-解决方法是：

$(this).parents(".wpProQuiz_questionListItem").find(".wpProQuiz_button").click();

还有一个工作片段

 $(".wpProQuiz_questionListItem").each(function(){ $(this).find("label").click(function(event){ alert($(this).attr("id")); $(this).find(".wpProQuiz_questionInput").prop('checked', true); $(this).parents(".wpProQuiz_questionListItem").find(".wpProQuiz_button").click(); event.preventDefault(); }) }); $(".wpProQuiz_button").on("click", function() { alert($(this).attr("id")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <ol class="wpProQuiz_list"> <li class="wpProQuiz_listItem"> <ul class="wpProQuiz_questionList"> <li class="wpProQuiz_questionListItem"> <!-- that's the answer --> <label id="one"> <input class="wpProQuiz_questionInput" type="radio" name="question_1_1" value="1"> <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/08/76/63/bahia-de-caraquez.jpg" class="questionimage"> </label> <input id="btn-one" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;" type="button" /> </li> </ul> <input id="btn-one-outer" type="button" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;"> </li> <li class="wpProQuiz_listItem"> <ul class="wpProQuiz_questionList"> <li class="wpProQuiz_questionListItem"> <!-- that's the answer --> <label id="two"> <input class="wpProQuiz_questionInput" type="radio" name="question_1_1" value="2"> <img src="http://media-cdn.tripadvisor.com/media/photo-s/01/08/76/63/bahia-de-caraquez.jpg" class="questionimage"> </label> <input id="btn-two" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;" type="button" /> </li> </ul> <input id="btn-two-outer" type="button" name="next" value="Next" class="wpProQuiz_button wpProQuiz_QuestionButton" style="float: right;"> </li> </ol> 

Answer 2

我认为event.stopImmediatePropagation(); 会帮助你

您的代码示例：

$(".wpProQuiz_questionListItem").each(function(){
   $(this).find("label").click(function(event){
      event.preventDefault();   
      event.stopImmediatePropagation();
      $(this).find(".wpProQuiz_questionInput").prop('checked', true);
      $(this).parents().find(".wpProQuiz_button").trigger('click');
   });
});