Изменить текст при зависании

Question

Я хочу изменить текст выбранного ввода на ccc. Я пробовал использовать .hover, но ничего не произошло.

$(function() { 
 
    $(".xxx").each(function() { 
 
    $(this).on("click", function() { 
 
     if ($(this).is(":checked")) { 
 
     $(this).next().html("bbb"); 
 
     $(this).parents(".checkbox").toggleClass("selected"); 
 
     } else { 
 
     $(this).next().html("aaa"); 
 
     $(this).parents(".checkbox").toggleClass("selected"); 
 
     } 
 
    }); 
 
    }); 
 
    $(".checkbox.selected").each(function() { 
 
    $(this) 
 
    .on("mouseover", function() { 
 
     $(this).find("p").html("ccc"); 
 
    }) 
 
    .on("mouseout", function() { 
 
     $(this).find("p").html("bbb"); 
 
    }); 
 
    }); 
 
});

.checkbox.selected:hover { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkbox"> 
 
    <label> 
 
    <input class="xxx" type="checkbox"/>      
 
    <p>aaa</p> 
 
    </label> 
 
</div> 
 
<div class="checkbox"> 
 
    <label> 
 
    <input class="xxx" type="checkbox"/>      
 
    <p>aaa</p> 
 
    </label> 
 
</div>

Answer 1

Это возвращает пустую коллекцию JQuery, потому что никакие флажки не имеют selected класс, когда он работает:

$(".checkbox.selected") 

Вместо этого, вы можете использовать обработчик в delegated событий например:

$(document) 
    .on('mouseover', '.checkbox.selected', function() { 
    $(this).find("p").html("ccc"); 
    }) 
    .on('mouseout', '.checkbox.selected', function() { 
    $(this).find("p").html("bbb"); 
    }); 

Отрывок

$(function() { 
 
    $(".xxx").each(function() { 
 
    $(this).on("click", function() { 
 
     if ($(this).is(":checked")) { 
 
     $(this).next().html("bbb"); 
 
     $(this).parents(".checkbox").toggleClass("selected"); 
 
     } else { 
 
     $(this).next().html("aaa"); 
 
     $(this).parents(".checkbox").toggleClass("selected"); 
 
     } 
 
    }); 
 
    }); 
 
    
 
    $(document) 
 
    .on('mouseover', '.checkbox.selected', function() { 
 
     $(this).find("p").html("ccc"); 
 
    }) 
 
    .on('mouseout', '.checkbox.selected', function() { 
 
     $(this).find("p").html("bbb"); 
 
    }); 
 
});

.checkbox.selected:hover { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkbox"> 
 
    <label> 
 
    <input class="xxx" type="checkbox"/>      
 
    <p>aaa</p> 
 
    </label> 
 
</div> 
 
<div class="checkbox"> 
 
    <label> 
 
    <input class="xxx" type="checkbox"/>      
 
    <p>aaa</p> 
 
    </label> 
 
</div>