Question

http://jsfiddle.net/fe3hnh4x/

<div class="text">(some text...)</div>

   var text = $(".text").text();
   var excerpt = '';
    if(text.length > 100) {
        console.log(text.length);
         excerpt = text.substr(0, 100);   
         $(".text").html(excerpt + "<div class='readMore'><a href='#'>Read More</a</div>");
    }

    $(".readMore").on('click', function() {
       $(".text").html(text +  "<div class='showLess'><a href='#'>Show Less</a></div>");
    });

    $(".showLess").on('click', function() {
       $(".text").html(excerpt +  "<div class='readMore'><a href='#'>Read More</a></div>");
    });

我正在尝试使用javascript摘录文本。单击“阅读更多”时，将显示整个文本和“显示更少”。单击“显示更少”时，将再次显示摘录和“阅读更多”。 “显示更少”不会触发任何事件，但“阅读更多”似乎有效。为什么呢？

Answer 1

试试这个：

   $(document).on('click', ".showLess", function () {
       $(".text").html(excerpt + "<div class='readMore'><a href='#'>Read More</a></div>");
   });

演示：http://jsfiddle.net/fe3hnh4x/1/

以下是解释：Event binding on dynamically created elements?

Answer 2

   $(".showLess").on('click', function() {

在课程的每个现有元素上添加onclick-Handler＆＃39; showLess＆＃39;

您必须更改readMoreFunction以添加onclick-Handler

$(".readMore").on('click', function() {
   $(".text").html(text +  "<div class='showLess'><a href='#'>Show Less</a></div>");
   $(".text").find(".showLess").on('click', function() { ...

});

HTH 乔治

Answer 3

使用事件委托。

$(".text").on('click', '.showLess', function() {});

为了能够捕获新创建的元素，选择一个合适的容器并将事件绑定到它，然后使用第二个参数作为希望事件发生的过滤器。

小提琴here

为什么这个动态创建的元素没有绑定到事件？

3 个答案: