Question

我的段落标记中使用了一个自定义插件（来自 dotdotdot plugin ），如果溢出则会使其成为省略号。

//ellipsis
        $(".custom").dotdotdot({
            /*  The HTML to add as ellipsis. */
            ellipsis    : '...',
            /*  Wrap-option fallback to 'letter' for long words */
            fallbackToLetter: true,
            /*  Optionally set a max-height, if null, the height will be measured. */
            height      : 40,
        });

这是我的HTML

<div class="mainWrapper">
    <div class="drop">
        <p class="custom">
            Sub Division Title Sub Division Title Sub Division Title
        </p>
    </div>
</div>    

<a class="myBUtton"> click me</a>

对于我的项目，我必须通过单击.myBUtton附加.custom段落。我用了

$('.mainWrapper').on('click', '.myBUtton', function() {
            $(".drop").append('<p class="custom">Sub Division Title Sub Division Title Sub Division Title</p>');

        });

但是，如果我使用追加方法附加该段落.dotdotdot函数无法正常工作。没有附加它的工作，但不知道为什么它在追加后不起作用。有没有正确的方法来做到这一点。可能是我做错了或遗失了什么。任何帮助将不胜感激。

由于

Answer 1

.myBUtton不在.mainWrapper内，并且将事件委托给不是父级的元素将不会起作用，因为事件会使链条冒泡，而不是兄弟元素

$('.mainWrapper').on('click', '.myBUtton', function() {...

使用实际的父元素或文档

$(document).on('click', '.myBUtton', function() {

Answer 2

问题是a.myButton不是.mainWrapper后代的一部分，而是它的兄弟。这就是您无法利用事件delegation的原因。

你可以做到

$('.mainWrapper + .myBUtton').on('click', function(e){
    $(this).prev().append('<p class="custom">...text here...</p>');
});

或者使用事件委托机制，您必须在所有.myButton元素的第一个共同祖先上附加处理程序，然后在此处理程序中执行您想要的操作，如$(this).prev().append('<p class="custom">...text here...</p>')以前的兄弟姐妹仍然是.mainWrapper ..

Answer 3

将$(".custom").dotdotdot({ //your code })放入函数中，然后在追加事件后调用此函数。

自定义功能无法使用追加方法

3 个答案: