How to add event handlers to DIVS with CSS classes containing a particular string?


Tags: javascript,jquery,css

Problem :

I want to be able to add some onclick event handlers to some DIV elements which are styled by CSS classes matching a particular string. The DIVS would be for a particular type of image which represents something called a Work Center in Discrete Event Simulation that I want users to be able to click on, change some settings, and run the simulation again.

I'm using a system that was developed ages ago that handles these images like so:

<div id="Decision__1" class="S8DisplayObject Image__for__Decision__1" style="top:35px; left:579px; width:118px; height:71px;"><div id="Decision__1_textData_2" class="S8Web-TextData" style="left:-136px; top:-12px;"><div class="noTextWrap">0</div></div><div class="sb_block_display"></div></div>
<div id="Decision__2" class="S8DisplayObject Image__for__Decision__2" style="top:35px; left:579px; width:118px; height:71px;"><div id="Decision__2_textData_2" class="S8Web-TextData" style="left:-136px; top:-12px;"><div class="noTextWrap">0</div></div><div class="sb_block_display"></div></div>

So it incrementally assigns a number to each class, and in this case, the string I would want to compare would be Image__for__Decision. Unfortunately I can't really delve into how these CSS classes are named, as they are part of a much larger conversion process.

Any tips would be greatly appreciated!



Solution :

You can use the "attribute contains" selector:

$("div[class*='Image__for__Decision']").click(function() {
    console.log("click!"); 
});

    CSS Howto..

    How to display two forms next to each other

    How to change the width of an HTML upload field with CSS?

    With CSS, how do you unhighlight a link after clicking a different link?

    How to style this with css? [closed]

    How to make a responsive text inside a bootstrap button

    How to apply css to buttons inside gridview

    Codeigniter Form Validation - Showing Errors Individually problems

    How to place sticky footer div's next to each other when bottom:0 is set dynamically

    How to get content below background-image with z-index of -1?

    How to make TD behaving like TR(row) with CSS?

    How to control tr height of table in CSS

    How do I make hidden description text push the content upwards when it shows

    How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?

    How to turn off word wrapping in HTML?

    CSS simple menu - how to align?

    How to get the position of element transformed with css rotate

    How to set CSS class to Button control using Session value in design page

    If I use “getElementById” to alter a CSS style of a single object, how do I alter all elements that inherit the style?

    How to slide-out a submenu from under the navigation bar using CSS transition?

    How to change css class for the inputfield and label when validation fails?

    gwt how to use setStyleName(String style, boolean add) - for a gwt standard widget

    Devtools audit shows unwanted/injected css rules

    How to uncover an image with css and jQuery

    how to remove space from html using bootstrap

    How to use one single png image to create multiple website buttons (and their hovers)

    How do I keep my footer at the bottom of the page without it coming up automatically to fill space if there is little content?

    How to move all content (relative,absolute,…) down?

    How to implement CSS multi-level drop down menu with different classes?

    How to reset css before repeating sequence

    How can I get to see the full image in the background?