I am currently developing a webpage with a unique "notepad" widget, and I have made some adjustments to the interface:
- The notepad is essentially an aesthetically modified
<ul>where each line on the notepad page is represented by its own<li>. - Users can easily click and type to add a new
<li>because of thecontenteditable: trueattribute. - Each newly added line is placed within a
<p>element and styled using jQuery.
Now, here's the issue I'm facing with jQuery. The code snippet below effectively adds the "strikethrough" class to the <p> element when double-clicked, and then removes it upon a second double-click. However, when I try to add a new <p> element by clicking on the "notepad," the jQuery script doesn't function as expected. It only affects <p> elements that were pre-existing on the page during the initial document load.
// NOTEPAD INTERFACE
$(".paper p").dblclick( function() {
$(this).toggleClass("strikethrough");
});
Does anyone have suggestions on how to ensure the same jQuery functionality applies consistently to all <p> elements, regardless of when they were added to the DOM?