CODEWITHSUNDEEP
jquery
Krešimir Galić
Krešimir Galić

Reputation: 376

Onclick event wont add class to div

i dont know whats wrong but on click event it wont add class to display what i need. This is my code. .rrssb-buttons are display:none

<script>
    $('#share').on('click',function(){
       $('.rrssb-buttons').addClass('active');
    });
</script>

I will also include all divs where i add that div trigger. 

<div class="talkofweb-floats">  

    <div class="timeago"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>  
    <div class="post-image"><?php the_post_thumbnail('home-thumb'); ?></div>
    <div class="post-text"><?php the_content(); ?></div>
    <div class="post-likes"><?php if( function_exists('zilla_likes') ) zilla_likes(); ?></div>
    <div class="sharing"> <?php echo do_shortcode('[rrssb]'); ?></div>
    <div id="share">Share</div>

</div>

Upvotes: 1

Views: 460

Answers (5)

Khang Pham
Khang Pham

Reputation: 24

    var_dump(do_shortcode('[rrssb]'));
//true: return string html

add console.log('string'); to click function

try it:

$('#share').click(function(){
   console.log('foo');
   $('.rrssb-buttons').show().addClass('active');
});

or add this code .active{display: block !important;} to the css file.

Upvotes: 0

Darren
Darren

Reputation: 13128

As stated above, it's best to wrap your function inside the $(document).ready(function());.

$(document).ready(function(){
    $('#share').on('click',function(){
        $('.rrssb-buttons').addClass('active');
    });
});

If the elements are added after the DOM has been created, you'd need to bind to the document:

$(document).on('click','#share',function(){

Although looking at your code, I assume there are multiple buttons within .rrssb-buttons ? So you'd have to loop through them and add the class to each of them (looks like they are each in divs).

$('.rrssb-buttons div').each(function(){'
    $(this).addClass('active');
});

Upvotes: 0

aorfevre
aorfevre

Reputation: 5064

When is your script added ? Before or after generation of your DOM ?

If it is added BEFORE generation of the DOM, then during the creation of the event, no DOM with ID="SHARE" is available and... therefore, nothing will be generated.

The solutions above to wait for document ready are to ensure that the DOM is finalized to create to click event but there are not mandatory to make your event work.

Upvotes: 0

exexzian
exexzian

Reputation: 7890

wrap 

 $('#share').on('click',function(){
       $('.rrssb-buttons').addClass('active');
    });

inside jquery 

$(document).ready(function(){
   $('#share').on('click',function(){
   $('.rrssb-buttons').addClass('active');
});
});

or shorter version 

$(function(){
  $('#share').on('click',function(){
       $('.rrssb-buttons').addClass('active');
    });
});

and make sure you have imported jquery library

Upvotes: 3

flauntster
flauntster

Reputation: 2016

Try wrapping your JS in $(document).ready(function(){ .. }); And make sure jquery is included prior.

Like:

<script>
    $(document).ready(function(){
      $('#share').on('click',function(){
         $('.rrssb-buttons').addClass('active');
      });
    });
</script>

Additionally, as I notice you're using wordpress, some wordpress themes will need you to use 'jQuery' in place of '$' annotation. Such as: jQuery(document).ready(...

Finally, adding a class 'active' will not necessarily make the buttons visible, unless the .active css class contains display: block; (or another value which will put it into view).

Upvotes: 0

Related Questions