為什么此動態創建的元素未綁定到事件？

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/

這里是解釋： 在動態創建的元素上進行事件綁定？

Answer 2

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

在類“ showLess”的每個當前存在的元素上添加onclick-Handler

您必須更改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() {});

為了能夠捕獲新創建的元素，請選擇適當的容器並將事件綁定到該容器，然后將第二個參數用作希望事件發生的過濾器。

在這里擺弄