JQuery select pseudo-element :after
Do something like this instead:
$(function(){
$('.show-more').after().click(function() {
alert("Yes");
});
});
.show-more {
Width: 100px;
Height: 40px;
Position: relative; /* Helps you define the area you want to be clickable */
Overflow: hidden;
}
.show-more:after {
content: 'Click me';
Left:0;
Top: 0;
width: 100%;
height: 100%;
background: red;
color: white;
padding: 15px;
line-height: 40px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-more"> </div>
Edit, Updated
Try
(function($) {
jQuery.fn.extend({
getPseudo: function(pseudo, prop) {
var props = window.getComputedStyle(
$(this).get(0), pseudo
).getPropertyValue(prop);
return String(props);
},
setPseudo: function(_pseudo, _prop, newprop) {
var elem = $(this);
var s = $("style");
var p = elem.getPseudo(_pseudo, _prop);
var r = p !== "" ? new RegExp(p) : false;
var selector = $.map(elem, function(val, key) {
return [val.tagName
, val.id
? "#" + val.id : null
, val.className ? "." + val.className : null]
});
var _setProp = "\n" + selector.join("")
.toLowerCase()
.concat(_pseudo)
.concat("{")
.concat(_prop + ":")
.concat(newprop + "};");
return ((!!r ? r.test($(s).text()) : r)
? $(s).text(function(index, prop) {
return prop.replace(r, newprop)
})
: $(s).append(_setProp)
);
}
})
})(jQuery);
i.e.g., initial css
:
.show-more:after {
content : ' > ';
}
set pseudo
element
$(".show-more-after").on("click", function() {
$(this).setPseudo(":after", "content", "'123'")
})
github pseudo.js
(function($) {
jQuery.fn.extend({
getPseudo: function(pseudo, prop) {
var props = window.getComputedStyle(
$(this).get(0), pseudo
).getPropertyValue(prop);
return String(props);
},
setPseudo: function(_pseudo, _prop, newprop) {
var elem = $(this);
var s = $("style");
var p = elem.getPseudo(_pseudo, _prop);
var r = p !== "" ? new RegExp(p) : false;
var selector = $.map(elem, function(val, key) {
return [val.tagName
, val.id
? "#" + val.id : null
, val.className ? "." + val.className : null]
});
var _setProp = "\n" + selector.join("")
.toLowerCase()
.concat(_pseudo)
.concat("{")
.concat(_prop + ":")
.concat(newprop + "};");
return ((!!r ? r.test($(s).text()) : r)
? $(s).text(function(index, prop) {
return prop.replace(r, newprop)
})
: $(s).append(_setProp)
);
}
})
})(jQuery);
$(".show-more-after").on("click", function() {
$(this).setPseudo(":after", "content", "'123'");
})
.show-more-after:after {
content : ' > ';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="show-more-after">click</div>
It's not possible to bind directly to pseudo-elements, since those are not part of the DOM, but the desired effect can be approximated by binding to a parent element and testing for an offset related to the element that the :after
acts upon:
The following renders as ELEMENT++
, where clicking on "ELEMENT" and "++" each triggers different behavior:
<span>ELEMENT</span>
span::after {
content: '++';
position: absolute;
}
span.c1 {
background: yellow;
}
span.c2::after {
background: orange;
}
const span = document.querySelector('span');
span.addEventListener('click', function (e) {
if (e.offsetX > span.offsetWidth) {
span.className = 'c2';
} else {
span.className = 'c1';
}
});
Interactive: http://jsfiddle.net/wC2p7/1/