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 set a relative position/size to the screen for elements in CSS/HTML? [closed]

    Keeping content “fixed” under slideshow of different image sizes

    How to create a chrome extension using multiple css and js files?

    How to export only the used css from a site?

    How do I make the 'panel/well' dynamically wrap around the image while keeping it centered? // Using Bootswatch/Bootstrap CSS

    Table: how to change pictures on mouseover on single rows?

    How to override default “text” cursor on mousedown, mousemove?

    How to scroll to particular element using CSS/JS

    How can I add a transition effect when opening my custom modal window?

    How to get div columns to be same height?

    How to make a img flicker using css(should work in all browsers)

    How to put Facebook and Twitter buttons next to each other?

    How to rotate top-border around the circle?

    How to put text in the upper right, or lower right corner of a “box” using css

    SceneBuilder (by gluon) doesn't show imported fonts

    How to make balloon textbook talking style using css

    How can I make my CSS code compatible with all browsers? [closed]

    How to dynicamlly center the center of a div based on screen size

    How to load a local copy of a generic CSS file when CDN is down? [duplicate]

    How to display a table with a span at its side?

    How to have two sub-divs the same height as each other

    How to make a text with skewed line but not letters?

    how to create css concave/convex shapes

    How to use css and images to create a rounded header section in an HTML page?

    how to select a input using jquery

    How to change the width of bootstrap popover

    How to prevent the scroll of table when click to header on Chrome?

    How to id dom table so I can position it on page?

    show/hide slider toggle for any number of IDs

    How to put JavaScript from tutorial into my website?