CODEWITHSUNDEEP
jquerycss
cohen
cohen

Reputation: 621

Style element when button is clicked

I have items and buttons that are created dynamically and I want to show user what is happening by styling them with jquery (i am using AJAX). each item is like the following: 

<li class="items">
<div class="itemheading">
<div class="controls"> 
    <span class="votes">1</span>
    <form class="actions" method="POST">
        <input type="submit" class="button plus" value="+1" data-plus="123">
    </form>
    <form class="actions" method="POST">
        <input type="submit" class="button minus" value="-1" data-minus="123">
    </form>  
    <form class="actions" method="POST">
        <input type="submit" class="button delete" value="X" data-del="123">
    </form></div><span class="title">Item title</span>
</div>
<span class="infotext">Item Description</span>
</li>

When a button is clicked I want the style of the item to be updated. for instance if the +1 button is clicked the items border should fade in green then fade back to nothing in the space of a few seconds to show that, that item has been voted up.

What I have thought of so far is the following: 

$(".plus").live('click', function() {
 $(this).css("background", "#fff");

This does not work though. I thought I could use $(this) to reference the button that was clicked because I am using this already to get the data- tag value of the button:

var plus = $(this).data('plus');

The other problem is that even if it did work it would style the buttons border and I need to somehow style the <div class="itemheading">. I could just say style the .itemheading element but since I will have multiple items with that class I need to find another method. Perhaps there is a way to reference the parent of an element and then I could get the parent of that?

Thanks. Any help is really appreciated.

UPDATE: so people can see what worked heres the code.

$(".plus").live('click', function() {
 $(this).parents(".itemheading").css("background", "#000");
});​

Upvotes: 2

Views: 122

Answers (2)

y2ok
y2ok

Reputation: 658

Here is a working example, not sure if that is what you ment, but the parent element of class plus with class .itemheading will blink black after clicking +1 button.

Example - http://jsfiddle.net/yZmrz/

Upvotes: 1

Rodik
Rodik

Reputation: 4092

2 issues,

The minor issue is .live is being deprecated, use .on instead http://api.jquery.com/on/

The main issue, You mentioned that those buttons are added dynamically, so i'm guessing that you are binding the .live event before the elements are created. and binding will only work on elements that already exist.

to fix this you should bind the event itself on a parent element which always exists, to handle the clicks on for it's children. like so:

$('.parent').on('click', '.plus', function(){
    $(this).css({background: "black"});
});

What this will do is, make sure that every click on a .plus element, which is a descendant of .parent, fires the function, regardless of when it was created.

as for making sure to only apply changes to related elements and not to all of them, use traversing ( http://api.jquery.com/category/traversing/ )

traversing means that you can access elements by saying where they are relative to $(this). so that $(this).siblings('.myClass') will only select .myClass elements who are in the same element as $(this)

Upvotes: 1

Related Questions