Question

I have a set a negative top margin (-15px) to an image and it works fine. But the problem is the click event. The click is still working just below (i.e. +15px below from the view where exactly image is on the browser) the image.

<div data-role="page" >

    <!-- Header -->
    <div data-role="header" class="listHeader" data-position="fixed" data-tap-    toggle="false">

        <img src="images/all_lists_normal.png" class="view_list"> 
        <img src="images/x_normal.png" class="x_image">
        <div class="titleList">
            <p id="page_title" class="label"></p>
        </div>

        <img id="id_new_products" src="images/add_products_normal.png" class="addNewItemImage_page4"> 
        <img id="id_find_stores"  src="images/find_store_normal.png"   class="addNewItemImageMargin">
    </div> <!-- / header -->

    <!-- Content -->
    <div data-role="content" class="mainBackground">
     some content....
    </div>

</div>




.listHeader {
background: url(../images/header_nologo.png) no-repeat 50% 0px;
background-size: 100% 107%;
height: 60px;

}

.view_list {
float: left;
margin-top: 12px;
}

.x_image {
float: right;
margin-right: 15px;
margin-top: 17px;
}

.addNewItemImage_page4 {
min-width: 100%;
margin-top: 9px;
position:relative;
}

.addNewItemImageMargin {
min-width: 100%;
margin-top: -14px; /****************** PROBLEM ***********/
position:relative;
}

.mainBackground {
background: url(../images/background.jpg) no-repeat 50% 0px;
background-size: 100% 100%;
min-height: inherit;
min-width: 100%;
margin-top: -2px;
}

JS :-

  $("#id_find_stores")
    .click(function(){

        alert('hi');

    });

Answer 1

This would be an example of placing your action handler on the img instead of the wrapping div:
http://jsfiddle.net/vhxc3/

This would be what I tried to come up with the info you provided us:
http://jsfiddle.net/hhkuL/

$(document).ready(function() {
    $('#id_new_products').click(function() {
        $(this).css({ "border" : "1px solid red" });            
    }); 
});​