Article

Double click list item to change its named color.

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

The following example shows how you can double click a list to change text color using an on() function attached to the body element https://raw.githubusercontent.com/finsweet/jqueryCourse/main/jquery%20events/ex16.js?actionable=true

In the code above we write a custom function: doubleClick().

This function defines what is to be done when a user double click the body. We attach our doubleClick() to the body element and add a"li" to that the on() function so that it finds the specific element to apply the doubleClick() function to.

This mechanism for event handling comes in handy when the elements we want to respond to events performed on elements added by jquery itself.

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

Live demo

<div id="minidivpage" class="example-live"><h4 class="heading-4">Colours in a webflow list:</h4><ul role="list" class="list"><li>Purple</li><li>Blue</li><li>Magenta</li></ul><a id="alertButton" href="#" class="w-button">Button alert</a></div>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.