CODEWITHSUNDEEP
jquery
Chris Chong
Chris Chong

Reputation: 187

function by different id not working

I'm trying to set different css styles for div with differents id's but the jquery function is changing both, Here and example:

demo

And I need the function to be per each div different.

$("#name").click(function(e){
    $("#tool").show();
    $("#tool").offset({left:e.pageX,top:e.pageY});

            $("#text-tool #left").click(function(){                             
                $("#name").css('text-align','left');
            });
            $("#text-tool #center").click(function(){                               
                $("#name").css('text-align','center');
            });
            $("#text-tool #right").click(function(){                                
                $("#name").css('text-align','right');
            });
            $("#color-tool #white").click(function(){                               
                $("#name").css('color','white');
            });
            $("#color-tool #red").click(function(){                             
                $("#name").css('color','red');
            });
            $("#color-tool #blue").click(function(){                                
                $("#name").css('color','blue');
            });
            $("#text-tool #bold").click(function(){                             
                $("#name").css('font-weight','bold');
            });
            $("#text-tool #italic").click(function(){                               
                $("#name").css('font-style','italic');
            });

});
$("#company_name").click(function(a){
    $("#tool").show();
    $("#tool").offset({left:a.pageX,top:a.pageY});

            $("#text-tool #left").click(function(){                             
                $("#company_name").css('text-align','left');
            });
            $("#text-tool #center").click(function(){                               
                $("#company_name").css('text-align','center');
            });
            $("#text-tool #right").click(function(){                                
                $("#company_name").css('text-align','right');
            });
            $("#color-tool #white").click(function(){                               
                $("#company_name").css('color','white');
            });
            $("#color-tool #red").click(function(){                             
                $("#company_name").css('color','red');
            });
            $("#color-tool #blue").click(function(){                                
                $("#company_name").css('color','blue');
            });
            $("#text-tool #bold").click(function(){                             
                $("#company_name").css('font-weight','bold');
            });
            $("#text-tool #italic").click(function(){                               
                $("#company_name").css('font-style','italic');
            });


});

Upvotes: 0

Views: 71

Answers (1)

epascarello
epascarello

Reputation: 207511

Because click does not override the other click event it appends.

use 

$(selector).off("click").on("click", ....

but the design can be improved big time. There is no need to add tons of events.

<button class="change" data-prop="font-weight" data-value="bold">BOLD</button>
<button class="change" data-prop="font-color" data-value="blue">BLUE</button>

Than one click handler and use event delegation with data attributes to control what is changed. Makes it so much easier to maintain. 

(function(){   
    var activeElem = "#name";    
    $("#name, #company_name").click(function(){  
        activeElem = this;
    });    
    $(document).on("click", "button", function () { 
        var btn = $(this);
        $(activeElem).css(btn.data("prop"), btn.data("value"));
    });    
}());

Upvotes: 1

Related Questions