Jquery动态类选择器不工作

我已经编写了一个单击事件，其中类是动态的

这是我的密码

jQuery HTML

----我的内容---

如果有额外的空间出现，就会产生问题。因此，在将其用作选择器之前，请修剪空间

$('.offersidemenu li').click(function () {
    var sidemenu = $(this).text().trim();
    alert(sidemenu); // Electronics is the output
    $('.' + sidemenu).css('border', '5px solid green'); 
});

编辑

弗里德里克·哈米迪建议

---

最好使用

$.trim（$（this）.text（））

来支持IE的底层版本

HTML和代码都存在许多问题

如前所述，

text（）

返回不需要的空格时可能会遇到问题。您的HTML也无效，因为您有不匹配的

DIV

标记，并且您不应该用锚和

DIV

s围绕

LI

。

LI

的父级必须是

UL

或

OL

不要依赖于文本并对其进行修剪（并修复任何其他问题），而是向元素添加

data-

属性。这是引用其他元素的一种更可靠、更易于维护的方式

e、 g.HTML

<ul class="offersidemenu">
    <li data-link=".Electronics">
        <div style="display: block; cursor: pointer;">
            <div style="border-bottom: 1px solid #F0F0F0;padding: 5px;"> <a href="#">   <span>All Offers</span> </a> 
            </div>
        </div>
    </li>
</ul>

JSFiddle：

委派的事件处理程序通过侦听向上冒泡到所需元素的非更改祖先的事件来工作。越近越好（为了提高效率），但是

文档

是默认值（如果没有可用的更近）。然后应用jQuery选择器。然后，它将函数应用于导致事件的任何匹配元素

---

委托处理程序的优点是元素可能还不存在。

使用$（this）.text（）.trim（）您可以共享li标记的html吗？@marioraque

您的li内容在span标记内。您必须找到标记值，而不是检查整个

值。检查我的答案，希望能有所帮助。你不应该使用文本内容来匹配其他元素。我在下面添加了一些建议/更正。考虑<代码> $.Timm（$（this）.Trand（））< /C>如果代码必须在IE8或更低版本上运行。HTML也是无效的（未匹配的DIV标签），并且在<代码> UL<代码>下，只有<代码> LI>代码> s。您也不应该依赖文本内容来匹配其他元素，因为这会导致维护问题（请改用数据属性）。

$('.offersidemenu li').click(function () {
    var sidemenu = $(this).text().trim();
    alert(sidemenu); // Electronics is the output
    $('.' + sidemenu).css('border', '5px solid green'); 
});

<ul class="offersidemenu">
    <li data-link=".Electronics">
        <div style="display: block; cursor: pointer;">
            <div style="border-bottom: 1px solid #F0F0F0;padding: 5px;"> <a href="#">   <span>All Offers</span> </a> 
            </div>
        </div>
    </li>
</ul>

// Shortcut for $(document).ready(
$(function () {
    $(document).on('click', '.offersidemenu li', function (e) {
        // Stop the link moving to the top of the page
        e.preventDefault();
        // Fetch the data-link attribute
        var sidemenu = $(this).data("link");
        $(sidemenu).css('border', '5px solid green');
    });
});