I am facing an issue with a simple class toggle in jQuery. Despite my best efforts, it is not working as intended.
The expected behavior is to toggle the class of the <p> when clicking anywhere on the label. It does work correctly if the checkbox is clicked. However, clicking anywhere else does not trigger the toggle.
$('.xtrag p').on('click', function() {
$(this).toggleClass('row9');
});.xtrag {
margin: 40px;
}
p {
margin: 10px 0;
}
.row0 {
background: #eee;
padding: 4px 8px;
}
.row9 {
background: #ffd;
}
.rt {
float: right;
}
label {
display: inline-block;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="xtrag">
<p class="row0">
<label for="xg1">
<span class="rt">
<input type="checkbox" name="extrag[]" value="1" id="xg1" />
</span>
Item 1
</label>
</p>
<p class="row0">
<label for="xg2">
<span class="rt">
<input type="checkbox" name="extrag[]" value="2" id="xg2" />
</span>
Item 2
</label>
</p>
<p class="row0">
<label for="xg3">
<span class="rt">
<input type="checkbox" name="extrag[]" value="3" id="xg3" />
</span>
Item 1
</label>
</p>
</div>What could be causing this issue?
Is there a solution to toggle the class of the <p> when the label is clicked?
I have attempted targeting the <label> and using .parent(), but it has not altered the behavior.