自定义函数不适用于追加方法

Custom function not working with append method

本文关键字：方法 追加 适用于 不适用 自定义函数      更新时间：2023-09-26

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

//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,
        });

这是我的网页

<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 附加该自定义段落。我用了 

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

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

谢谢

.myBUtton不在

.mainWrapper 内部，并且将事件委托给非父元素是行不通的，因为事件在链上冒泡，而不是同级元素

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

使用实际的父元素或文档

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

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

你可以做

$('.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.。

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

相关文章：