JQuery on page load instead of click live()

Question

I have a website that uses the following script:

//==================== EXPAND ========================//
$('a.expand').live('click',function() {

    var _hide   = $(this).attr('data-hide');

    $(this).addClass('activeSpan');
    $(this).parent().find('.details-post').slideDown(); 
    $(this).parents('li').find('.grid-reply').slideDown(); 
    $(this).parents('li').find('.spanReply').slideDown();       
    $(this).parent().find('.textEx').html(_hide); 
    $(this).removeClass('expand');

    if( $(this).hasClass( 'reply' ) )
    {
        $(this).parent().find('#reply_post').focus();
    }
});

$('a.activeSpan').live('click',function() {
    var _expand = $(this).attr('data-expand');

    $(this).addClass('expand');
    $(this).parent().find('.details-post').slideUp();
    $(this).parents('li').find('.grid-reply').slideUp();
    $(this).parents('li').find('.spanReply').slideUp(); 
    $(this).parent().find('.textEx').html(_expand); 
    $(this).removeClass('activeSpan');
});

$('.optionsUser > li:last').css({'border':'none'});

This is used to display data when the user clicks on "expand". Instead of this, I want the text to appear automatically. How should I change the script? I have tried changing live('click' to live('load' but this doesn't work.

The site uses: https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

Thanks in advance.

This is the php code:

<!-- EXPAND -->
<a data-expand="<?php echo $_SESSION['LANG']['expand']; ?>" data-hide="<?php echo $_SESSION['LANG']['hide']; ?>" class="expand getData" data="<?php echo $key['id']; ?>" data-token="<?php echo $key['token_id']; ?>">
<?php echo $icon; ?>
<span class="textEx"><?php echo $_SESSION['LANG']['expand']; ?></span> <?php echo $typeMedia; ?>
</a>

And this is the sample html:

<a data-expand="Expand" data-hide="Collapse" class="expand getData" data="697" data-token="0f1966ac9d8529055f9b0e09c0a58a65cdf5d5e8">                                  <span class="textEx">Genişlet</span>             </a>

Think of facebook or twitter, you click on expand and you get an area to reply to a post. At the moment I have to click to see the reply form, but I want that to appear by default.

Do you want it to trigger on page load instead of, or in addition to, being clicked? — j08691, Mar 23 '14 at 20:24
The couldn't you just remove the click event handlers and put the code inside a .ready() call? — j08691, Mar 23 '14 at 20:30
how would I do that? Sorry I am a complete beginner at jquery :( — user3429609, Mar 23 '14 at 20:31
FYI, `.live()` has been removed from the later versions of jQuery. You should switch to the dynamic form of `.on()` as shown here: http://stackoverflow.com/questions/8752321/jquery-live-vs-on-method-for-adding-a-click-event-after-loading-dynamic-ht/8752376#8752376 — jfriend00, Mar 23 '14 at 20:35

Wilmer · Answer 1 · 2014-03-23T21:48:41.750

0

You can use a custom event or simply trigger the click programmatically:

$(function(){//run on page load

    $('a.expand').live('click',function() {

        var _hide   = $(this).attr('data-hide');

        $(this).addClass('activeSpan');
        $(this).parent().find('.details-post').slideDown(); 
        $(this).parents('li').find('.grid-reply').slideDown(); 
        $(this).parents('li').find('.spanReply').slideDown();       
        $(this).parent().find('.textEx').html(_hide); 
        $(this).removeClass('expand');

        if( $(this).hasClass( 'reply' ) )
        {
            $(this).parent().find('#reply_post').focus();
        }
    });

    $('a.activeSpan').live('click',function() {
        var _expand = $(this).attr('data-expand');

        $(this).addClass('expand');
        $(this).parent().find('.details-post').slideUp();
        $(this).parents('li').find('.grid-reply').slideUp();
        $(this).parents('li').find('.spanReply').slideUp(); 
        $(this).parent().find('.textEx').html(_expand); 
        $(this).removeClass('activeSpan');
    });

    $('a.expand').trigger("click");//trigger click on page load

    $('.optionsUser > li:last').css({'border':'none'});
});

edited Mar 23 '14 at 21:48

answered Mar 23 '14 at 20:32

Wilmer

2,511
1
14
8

Unfortunately it didn't work. The php file this references to is: ' ' Anything I should change here too maybe? – user3429609 Mar 23 '14 at 20:48
hmm should not be a problem on the server side if the click was working no reason this shouldn't. You only want the function on a.expand to run correct? Do you still want to keep the click behaviour? – Wilmer Mar 23 '14 at 20:53
Yes correct. There is an expand button and collapse button. I want the expand (a.expand) to work automatically without clicking, but the collapse (a.activeSpan) to work on clicking. – user3429609 Mar 23 '14 at 20:56
Could it be because the site uses jquery 1.7.2? – user3429609 Mar 23 '14 at 20:58
are the link loaded via ajax or they're already there on page load? – Wilmer Mar 23 '14 at 20:58
ok try undo the changes and trigger a click instead $('a.expand').trigger("click"); – Wilmer Mar 23 '14 at 21:00
ok can you provide a sample of html? share on your post please. I'll make a working demo with 1.7.2 – Wilmer Mar 23 '14 at 21:06
that's only the link what about the elements that are being expanded? – Wilmer Mar 23 '14 at 21:43
ok nevermind I think i figured it out, you need to wrap your code with $(function(){}); so the trigger() can execute when the click event is actually available (on page load). I've updated my reply with the changes. – Wilmer Mar 23 '14 at 21:50
This didn't work on its own, but I added to the html code and that did the trick! Thanks for your help – user3429609 Mar 24 '14 at 08:24

score 0 · Answer 2 · answered Mar 31 '14 at 18:33

If you move the code from the anonymous function you're binding to a.expand to a named function, all you would need to do is invoke it on DOM ready, then you would also just pass the function to your a.expand handler.

$(function(){
  $('a.expand').live('click', Expand);

  Expand(); // Invoke function

  $('a.activeSpan').live('click',function() {
    var _expand = $(this).attr('data-expand');

    $(this).addClass('expand');
    $(this).parent().find('.details-post').slideUp();
    $(this).parents('li').find('.grid-reply').slideUp();
    $(this).parents('li').find('.spanReply').slideUp(); 
    $(this).parent().find('.textEx').html(_expand); 
    $(this).removeClass('activeSpan');
  });

  $('.optionsUser > li:last').css({'border':'none'});
});
//Extracted function
function Expand() {

var _hide   = $(this).attr('data-hide');

$(this).addClass('activeSpan');
$(this).parent().find('.details-post').slideDown(); 
$(this).parents('li').find('.grid-reply').slideDown(); 
$(this).parents('li').find('.spanReply').slideDown();       
$(this).parent().find('.textEx').html(_hide); 
$(this).removeClass('expand');

if( $(this).hasClass( 'reply' ) )
{
    $(this).parent().find('#reply_post').focus();
}
}

JQuery on page load instead of click live()

2 Answers2