JQuery select伪元素：在之后

我想选择伪元素:after

这是我的css：

 show-more:after { content : (" > "); } 

JQuery代码

 $(function(){ $('.show-more:after').click(function() { alert("Yes"); }); }); 

Answer 1

您可以绑定到它们的父元素，但伪元素是不可能的：这些元素根本不是DOM的一部分，因此您不能将任何事件直接绑定到它们。

对不起，问候，

url： http://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element ： http://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element

---

编辑：

实际上是可能的：抱歉。

这里是JSFiddle的URL： 演示链接

Answer 2

编辑，更新

尝试

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

ieg，初始css ：

 .show-more:after { content : ' > '; } 

设置pseudo元素

 $(".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 : ' > '; } 

  
click 

Answer 3

做这样的事情：

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

Answer 4

使用此function在显示更多后添加文本

 $(function(){ $('.show-more').text($('.show-more').text()+">"); });