Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialSamantha Atkinson
Front End Web Development Techdegree Graduate 40,307 PointsEvent Delegation or Event Propagation? When we append the $pdfCheckbox variable to the parent element #links (div)
const $odd = $('a:odd');
const $secureLinks = $('a[href^="https://"]');
const $pdfLinks = $('a[href$=".pdf"]');
//5.We creates a variable to hold our html
const $pdfCheckbox = $("<label><input type='checkbox'> Allow PDF downloads</label>");
$secureLinks.attr('target', '_blank');
$pdfLinks.attr('download',true);
$secureLinks.addClass('secure');
//Add Flag Locked the pdfLinks
$pdfLinks.addClass('pdf');
//1. Adding a click event to the PDF link using the ON Method
$pdfLinks.on('click', function(event){
//1. Check that checkbox is clicked
//2. If zero checkboxes are checked
if ($(':checked').length === 0) {
//2A. prevent download of document
event.preventDefault();
//3. Alert the user
alert('Please check the box to allow PDF Downloads');
}
});
//7. We appended our variable checkbox to the parent element
$('#links').append($pdfCheckbox);
So what are we doing on the last line Event Delegation or Event Propagation? Or neither? lol
1 Answer
Steven Parker
231,269 PointsYou might call this "DOM Manipulation", and this operation isn't directly related to events. The "append" method adds additional content, typically other elements, to an existing element in the DOM. In this case, it's adding the checkbox which was previously coded in HTML.
For more details, see the jQuery documentation for .append().
Samantha Atkinson
Front End Web Development Techdegree Graduate 40,307 PointsSamantha Atkinson
Front End Web Development Techdegree Graduate 40,307 PointsThank you Steven, yes you just confirmed what I thought after posting the question. Delegation and Propagation are related to Events. And you just clarified that that last line is DOM Manipulation.