Click on image does not work with box-Sizing

Question

Hi, I have a problem.. In an image of my site, which has ID #image, when clicked it executes a code in jquery, as the below:

<script>
$(document).ready(function() {
    $("#imagem").click(function(){
        $("#div1, #div2").css("display", "none");
    });
});
</script>

Problem is, when clicked image does not perform the action defined there, but if I go to the page, and change the attribute border-sizing for content-box or take it (da anyway, because without the default is to be content-box) so my image performs action when clicked.
Which could only work when I take off the attribute box-sizing: border-box, or change to content-box for example?

CSS of the image:

     <span id="imagem"><img src="img.png" border="0" class="img-responsive"/></span>

Basically it’s the bootstrap img-Responsive class! span has the id #image, because jquery checks if there was any click on that span, as in span it has only that image, so the image will run jQuery.

Answer 1

Thank you. But it was my mistake. Well, I was using the bootstrap to make the page responsive, so the Divs are all in the bootstrap pattern (classes were: col-Sm-12, col-Sm-8.), respecting what they preach! However, I left a DIV (this div that contained span, which this time this span contained this image that requested Jquery in the click), but this DIV was not in the Bootstrap standards (the class was another, one I created), and underneath this div had another DIV in the bootstrap pattern(col-Sm-12) that practically covered up this my DIV that was out of the standards, which in turn did not allow me to click the button, because the DIV covered up.

When I spoke of, box-Sizing, that I switched from border-box to content-box worked, it is because in content-box it ends separating all Ivs, and that left DIV before covered, uncovered!

I hope you understand, for future who have passed through here understand!

Answer 2

Try to change your method to .hide(), rather than .css("display", "none")

Example:

$(document).ready(function() {
    $("#imagem").click(function(){
        $("#div1, #div2").hide();
    });
});

Method . Hide()