CODEWITHSUNDEEP
javascriptjqueryhtml
Raihan
Raihan

Reputation: 4001

Custom function not working with append method

I have a custom plugin ( from dotdotdot plugin) used in my paragraph tag to make it ellipses if it overflows. 

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

Here is my 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>

For my project I have to append that .custom paragraph by clicking .myBUtton. I used 

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

        });

But if I append that paragraph with append method .dotdotdot function not working. without appending it's working but don't know why it's not working after append. Is there proper way to do that. May be I am doing wrong or missing anything. Any help will be appreciated.

Thanks

Upvotes: 0

Views: 116

Answers (3)

Stphane
Stphane

Reputation: 3456

The problem is that the a.myButton is not part of .mainWrapper descendant, but is its sibling. This is the reason why you can't take advantage of event delegation.

You could do

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

OR using event delegation mechanism, you will have to attach the handler on the first common ancestor of all .myButton element then do what ever you'd like to inside this handler, like $(this).prev().append('<p class="custom">...text here...</p>') if its previous sibling stills a .mainWrapper ..

Upvotes: 2

adeneo
adeneo

Reputation: 318182

.myBUtton is not inside .mainWrapper, and delegating the event to an element that is not a parent wont work as the event bubbles up the chain, not to sibling elements

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

use an actual parent element, or the document

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

Upvotes: 2

Vickel
Vickel

Reputation: 7997

put $(".custom").dotdotdot({ //your code }) inside a function and then call this function after the append event.

Upvotes: 0

Related Questions