点击内部仅在标签内点击两次（）

Question

I have a container on my page called task1 containing a slideshow, back button and next button. The final page will have task1 as one of a series of tabs(container called tasks). My onClick event works perfectly when I leave out the tabs() function. As soon as I add the tabs(), the onClick fires twice. I have checked other questions, but the most popular answer of "check if the code is written twice" does not hold any water.

Any suggestions? Thanks in advance.

HTML:

<div class="content" id="tasks">
  <ul>
    <li><a href="#task1">Review for Quiz</a></li>
    <li><a href="#task2">task 2</a></li>
    <li><a href="#task3">task 3</a></li>
    <li><a href="#task4">task 4</a></li>
    <li><a href="#task5">Blackjack</a></li>
  </ul>                 

  <div class="content" id="task1"></div>
  <div class="content" id="task2"></div>
  <div class="content" id="task3"></div>
  <div class="content" id="task4"></div>
  <div class="content" id="task5"></div>
</div>

jquery:

$("#tasks").tabs();

$(".content").on('click','.yNext',function(){
    $.ajax({
        url: "task1php.php",
        async: true,
        type: "POST",
        data: {func: 3}
    }).success(function(data){
        alert(data);
        $("#task1").html(data);
    });
});

php to generate slides(.yNext is the next button and .yBack is back button):

if($slide == '55')
$slide = '1';
else
    $slide++;   
echo "<div class='yLeftSs'>";
echo "<input class='yBack' type='image' src='images/BackArrow.png' />";//back button
echo "</div>";
echo "<div class='yCenterSs'>";
echo "<img class='ySlides' src='images/Task1_slides/Slide".$slide.".PNG'/>";
echo "</div>";
echo "<div class='yRightSs'>";
echo "<input class='yNext' type='image' src='images/NextArrow.png' />";//next button
echo "</div>";  

Answer 1

Add return false; to the end of the click handler to prevent the default action and event bubbling. One of these seems to be triggering the handler again.