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

Question

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

Answer 1

As pointed out by @Felix King

Since the image is not an element in the document, it does not trigger events and you cannot bind a handler to it. You have to use a workaround.

Here is a possible work-around (in jquery, but could just as easily be POJS).

CSS

.wrapper {
    padding: 1px;
    display: inline-block;
    border: 2px LightGray inset;
}
.wrapperFocus {
    border: 2px DarkGray inset;
}
.textInput {
    padding: 0;
    border:none;
    outline: none;
    height: 20px;
    width: 150px;
}
.cross {
    float: right;
    height: 20px;
    width: 20px;
    background-image:url('http://s20.postimg.org/6125okgwt/rough_Close.png');
    background-repeat:no-repeat;
    background-position: center;
    background-size:90%;
    cursor: pointer;
}

HTML

    


    


    


submit

Javascript

$(document).on("click", "span.cross", function () {
    $(this).prev().val("");
}).on("focus", "input.textInput", function () {
    $(this).parent().addClass("wrapperFocus");
}).on("blur", "input.textInput", function () {
    $(this).parent().removeClass("wrapperFocus");
});

On jsfiddle

Or if you want to do it without the additional CSS and HTML, then this should be cross-browser (POJS as you already have a jquery example).

CSS

.cross {
    height: 20px;
    width: 150px;
    background-image:url('http://s20.postimg.org/6125okgwt/rough_Close.png');
    background-repeat:no-repeat;
    background-position:right center;
    background-size:10% 90%;
    z-index: -1;
    padding-right: 6%;
}

HTML

submit

Javascript

function normalise(e) {
    e = e || window.event;
    e.target = e.target || e.srcElement;

    return e;
}

var getWidth = (function () {
    var func;

    if (document.defaultView.getComputedStyle) {
        func = document.defaultView.getComputedStyle;
    } else if (target.currentStyle) {
        func = function (t) {
            return t.currentStyle;
        }
    } else {
        func = function () {
            throw new Error("unable to get a computed width");
        }
    }

    return function (target) {
        return parseInt(func(target).width);
    };
}());

function isInputCross(target) {
    return target.tagName.toUpperCase() === "INPUT" && target.className.match(/(?:^|\s)cross(?!\S)/);
}

function isOverImage(e) {
    return (e.clientX - e.target.offsetLeft) > getWidth(e.target);
}

function clearCrossInput(e) {
    e = normalise(e);
    if (isInputCross(e.target) && isOverImage(e)) {
        e.target.value = "";
    }
}

document.body.onclick = (function () {
    var prevFunc = document.body.onclick;

    if ({}.toString.call(prevFunc) === "[object Function]") {
        return function (ev) {
            prevFunc(ev);
            clearCrossInput(ev);
        };
    }

    return clearCrossInput;
}());

On jsfiddle

But if you want the cursor to change when hovered over the position then you will need to do some extra work. Like this (you could just as easily do this with jquery too).

Javascript

function hoverCrossInput(e) {
    e = normalise(e);
    if (isInputCross(e.target)) {
        if (isOverImage(e)) {
            e.target.style.cursor = "pointer";
            return;
        }
    }

    e.target.style.cursor = "";
}

document.body.onmousemove = (function () {
    var prevFunc = document.body.onmousemove;

    if ({}.toString.call(prevFunc) === "[object Function]") {
        return function (ev) {
            prevFunc(ev);
            hoverCrossInput(ev);
        };
    }

    return hoverCrossInput;
}());

On jsfiddle