Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2012
    Location
    Slovakia
    Posts
    111
    Thanks
    9
    Thanked 0 Times in 0 Posts

    jquery function on,live problem

    Hellou all!

    I am sticked in situation with plugin and "on" or "live" method.

    I have this

    Code:
    jQuery.fn.shorten = function(settings) {
      var config = {
        showChars : 200,
        ellipsesText : "...",
        moreText : "Show more",
        lessText : "Show less"
      };
    
      if (settings) {
        $.extend(config, settings);
      }
    
        $('.morelink').live('click', function() {
            var $this = $(this);
            if ($this.hasClass('less')) {
              $this.removeClass('less');
              $this.html("Show more");
            } else {
              $this.addClass('less');
              $this.html("Show less");
            }
            $this.parent().prev().toggle(); // skryje bodky
            $this.prev().toggle();          // skryje text
            return false;
        });
    
      return this.each(function() {
        var $this = $(this);
        var content = $this.html();
        if (content.length > config.showChars) {
          var c = content.substr(0, config.showChars);
          var h = content.substr(config.showChars , content.length - config.showChars);
          var html = c + '<span class="moreellipses">' + config.ellipsesText + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="javascript://nop/" class="morelink">' + config.moreText + '</a></span>';
          $this.html(html);
          $(".morecontent span").hide();
        }
      });
    };
    
    $(".status_obsah").shorten();
    Which works greate... but when i load new content via ajax to example ... it still transform the long text to short text and add the 'show more' anchor to it but i can't click on it. I found solution that when i cut this part with "click function"

    $('.morelink').live('click', function() {
    var $this = $(this);
    if ($this.hasClass('less')) {
    $this.removeClass('less');
    $this.html("Show more");
    } else {
    $this.addClass('less');
    $this.html("Show less");
    }
    $this.parent().prev().toggle(); // skryje bodky
    $this.prev().toggle(); // skryje text
    return false;
    });

    Outsite the function then i can click.

    And i also need to add this function again after i load new content like this

    // some ajax
    success: function(data) {
    $(".status_obsah").shorten();
    //

    so ... what is the solutiion here to make it cleaner?

    And last thing:

    I know that from version 1.7 jquery ... is better to use ON ... but can i somehow remake it to my needs?

    THX FOR HELP!

  • #2
    Regular Coder
    Join Date
    Jan 2012
    Location
    Slovakia
    Posts
    111
    Thanks
    9
    Thanked 0 Times in 0 Posts
    bump ? :/ :P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •