How to bind click event on image added using CSS 'background-image' property in jQuery

css, javascript, jquery

Solution

Something like this appears to also work:

$('.cross').click(function(e) {
  var mousePosInElement = e.pageX - $(this).position().left;
  if (mousePosInElement > $(this).width()) {
     $(this).val(''); 
  }
});

Link to example

Problem

Here is my fiddle link I guess my question is clear by title itself. Still, what I am looking for is an way to bind `click` event on the image added using css's `background-image` property. I know, I could have achieved the similar functionality (of placing image over input field using this way or this way) by simply positioning `<img>` tag over `input` box and then handling the required events but that way didn't seem too flexible with input fields of varying width and height or if the wrapping div doesn't have `position:relative;` as its property. If adding event on image loaded with `background-image` is not possible then how to make the later approach more flexible. Hope I have conveyed my issues clearly. Thanks.

Original source

Related problems