僅觸發一次點擊

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