Custom function not working with append method

Question

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

adeneo · Accepted Answer · 2014-04-07 22:44:38Z

2

.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() {

answered Apr 7, 2014 at 22:44

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stphane · Accepted Answer · 2014-04-07 22:45:57Z

2

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 ..

answered Apr 7, 2014 at 22:45

Stphane

3,4765 gold badges36 silver badges49 bronze badges

Comments

Vickel · Accepted Answer · 2014-04-07 22:43:59Z

0

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

answered Apr 7, 2014 at 22:43

Vickel

7,9906 gold badges40 silver badges63 bronze badges

Collectives™ on Stack Overflow

Custom function not working with append method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related