Question

I am working with a homebrewed grid in which each element is a button. Templates are used for the button styling and look something like this:

<div id='cellTemplate'>
    <p>some content</p>
</div>

As you can see above, the template is constructed with a containing div which is replicated for each cell. Inside, can be anything, but in most cases, there is a ‘p’ tag with some text content.

What I’d like to do is construct a delete button, but the problem I am having is that clicking the delete button also fires the click handler on the containing div. I would like to create a delete button that does not appear to fire the containing div’s click handler.

I’ve created the sample html, which so far, has not worked out.

<div id='cellTemplate'>
    <p>some content</p>
    <div class='deleteButton'>(X)</div>
</div>

Due to the construction of the framework, ‘cellTemplate’ will, by default, have a click handler assigned to it.

Answer 1

stopPropagation is used for exactly this purpose. It prevents the event from bubbling up to parent elements.

$("something").click(function(e){
   e.stopPropagation();
   // do stuff
});