Adding class to clicked element

Question

I'm trying to add a class to a clicked element. There are multiple elements with unique IDs so I "don't know" what the ID of the element is.

Can I use a modified version of the below code to achieve this?

Jquery:

$(document).ready(function () {
    $(this).on('click', function () {
        $(this).addClass('widget-selected');
    });
});

EDIT:

A markup can be like this:

<h1 id="textHolder1" contenteditable="true">Text to edit</h1>

Hydrolyze

what type of element ? can you show your markup ? – Shaff

when you're inside $(document).ready(function() {}), $(this) will refer to $(document). – Cuprous

You want to target only h1 elements ? – Shaff

you could give all the elements a specific class "clickable" and target that in the jquery e.g. $('.clickable').on... – Markup

Answer 1

I would try with this..

 $(document).ready(function () {

     //this will attach the class to every target 
     $(document).on('click', function (event) {
         $target = $(event.target);   
            $target.addClass('widget-selected');
        });

    })

or if you want to check a certain id use

  ...
  if(event.target.id === "idname") { ... }
  ... 

Extrorse

This worked nice for me! Thanks! But I forget to mention that the "elements" are in one container, say "#container" so I change "document" to "#container" so it works fine for the elements inside the container, but it also adds the class to "#container", can I prevent that someone? – Hydrolyze

I don't understand what you mean in the last line when you say "but it also adds the class to "#container" " , can you explain it better? – Extrorse

I mean the "effect" is to visually "select" an item inside the canvas. But now it also put that effect on the canvas-container that wrapps the element. But I solved quite easy with !important in css of the container not to show that effect. So it works fine! Thanks anyway. Your answer was helpful! – Hydrolyze

We're here for that. Tell us if you have more problems! – Extrorse

Thanks, yeah! People here on SO are really awesome :) – Hydrolyze

$target = $(event.target); $target.addClass('widget-selected'); This code is so useful for me more than question, thank you very much! – Apartment

Answer 2

You need to use a selector to have an element to click on:

$(document).ready(function () {
    $(this).on('click', function () {  //  here $(this) is refering to document
        $(this).addClass('widget-selected');
    });
});

For example:

If your HTML were:

<ul>
    <li><p>Click</p></li>
    <li><p>Me</p></li>
</ul>

Then you're JavaScript could be:

$(function() {
    $("li").on("click", function(e) {  // See here, i have our selector set to "li", so this jQuery object will grab all li tags on the page
        $(this).addClass("widget-selected").siblings().removeClass("widget-selected");
    });
})

To select any element:

$(function() {
    $("*").on("click", function(e) {  // selects any element
        e.stopPropagation(); // stops click event from bubbling up from child
        $(".widget-selected").removeClass("widget-selected"); // remove all previously selected classes
        $(this).addClass("widget-selected"); // add our new class
    });
})

Example jsFiddle HERE

Later Example using *

More about jQuery selectors

Maggi

Answer 3

if you have multiple element's like this (as you posted your markup) -

<h1 id="textHolder1" contenteditable="true">Text to edit</h1>
<h1 id="textHolder2" contenteditable="true">Text to edit</h1>
<h1 id="textHolder3" contenteditable="true">Text to edit</h1>

You can do this -

 $(document).ready(function() {  
    $("h1[id^='textHolder']").on('click', function() {
       $(this).addClass('widget-selected');
    });
 });

Shaff

Answer 4

You can use * to select everything.

$(function(){
    $('*').on('click', function(){
        $(this).addClass('widget-selected')
    });
});

Chavers

Answer 5

It depends on the element type and parents, children anything that can lead you to that element let's say that the element is an anchor so you make it like this

$(document).ready(function () {
    $('a').on('click', function () {
        $(this).addClass('widget-selected');
    });
});

Or all the elements are childs of parent class parent

$(document).ready(function () {
    $('.parent a').on('click', function () {
        $(this).addClass('widget-selected');
    });
});

There are a lot of ways to achieve this

If you posted HTML code it will help very much

If you are generating the ID's dynamically you can make a string of them like the following

var str = "#firstID,#secondID,#third,#fourth"; 

and use it like this

$(document).ready(function () {
    $(str).on('click', function () {
        $(this).addClass('widget-selected');
    });
});

I hope this can lead you to your goal

EDIT

after you added the HTML you should take a look at the following

http://api.jquery.com/attribute-starts-with-selector/

OR you can select using contenteditable=true

Some of the folks here added an answer about the starts with attribute

Tirza