Как связать событие click на изображении, добавленном с использованием свойства CSS background-image в jQuery

Ответ 1

Кажется, что-то вроде этого работает:

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

Ссылка на пример

Ответ 2

Итак, вам нужно привязать событие click к изображению, но не используя атрибут атрибута, который действительно очень хороший и сложный вопрос. Кстати,

Я знаю, что мой подход сложный, но это единственное, что я могу сейчас увидеть.

Вы можете получить размер изображения (widthImage и heightImage) и узнать родственники позиции друг друга (вот способ вычисления позиции объекта по отношению к anohter: jQuery получить позицию элемента относительно другого элемента), вы можете использовать его для вычисления положения ввода во всем экране

и попробуйте что-то вроде этого:

$(документ).ready(функция() {

  $('body').on('click', 'input.cross', function (e) {
        var widthInput = parseInt($(this).css('width'),10);
        var heightInput = parseInt($(this).css('height'),10);

        var position  = $(this).position();
        var top       = position.top;
        var left      = position.left;    

        var sizesRelativesInPercentage = $(this).css('background-size').split(/ +/);

        var widthPorcentage = parseInt(sizesRelativesInPercentage[0],10);
        var heightPorcentage =  parseInt(sizesRelativesInPercentage[1],10);

        var widthImage = (widthInput * widthPorcentage)/100;
        var heightImage = (heightInput * heightPorcentage)/100;

        var xFinalImageFinish= (left+widthInput);
        var yFinalImageFinish = (top+heightInput);


        // Fire the callback if the click was in the image
        if (e.pageX >= xFinalImageStart && e.pageX <= xFinalImageFinish &&
            e.pageY >= yFinalImageStart && e.pageY <= yFinalImageFinish) {

            // Prevent crazy animations and redundant handling
            $(this).off('click');
            alert('click on the image');

            //Do whatever you want
        }
    });
});

Это всего лишь идея... Я пытаюсь это сделать, надеюсь: O

Ответ 3

Как указано @Felix King

Поскольку изображение не является элементом документа, оно не запускается события, и вы не можете привязать к нему обработчик. Вы должны использовать обходной путь.

Вот возможная обходная работа (в jquery, но так же легко может быть 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

<fieldset class="wrapper">
    <input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<fieldset class="wrapper">
    <input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<fieldset class="wrapper">
    <input type="text" class="textInput" /><span class="cross"></span>
</fieldset>
<hr>
<button>submit</button>

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");
});

Вкл jsfiddle

Или если вы хотите сделать это без дополнительных CSS и HTML, то это должно быть кросс-браузер (POJS, поскольку у вас уже есть пример jquery).

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

<input type="text" class="cross" />
<input type="text" class="cross" />
<input type="text" class="cross" />
<hr>
<button>submit</button>

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;
}());

Вкл jsfiddle

Но если вы хотите, чтобы курсор менялся при наведении курсора на позицию, вам нужно будет выполнить дополнительную работу. Подобно этому (вы можете так же легко сделать это с помощью jquery).

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;
}());

Вкл jsfiddle

Ответ 4

Я делаю что-то подобное, используя <input type="text" ... >, за которым следует <input type="button">

Кнопка получает фоновое изображение и позиционируется относительно перемещения в текстовое поле; по существу...

position: relative;
top: 4px;
right: 1.6em;
height: 16px;
width: 16px;
border: none;

Затем я просто добавляю к клику мертвый клик, никаких вычислений не требуется.

Ширина высоты x будет зависеть от вашего изображения, и вы будете настраивать верх и правы в соответствии с вашей ситуацией.

Этот fiddle показывает, что он обходится без оснований.