How to know when an input has changed its class

Question

I have function which is removing and adding class into input tag, i want to when we add or remove class then one function should alert that you have made changes.

<head>
    <script type="text/javascript">
        $(function() {
            $('a').click(function() {
                $('input').removeClass()
                var cl = $(this).attr('class')
                $('input').addClass(cl)
            })
        })

        function activitydone() {
            alert('class change')
        }
    </script>

    <style>
        .first { border:solid 1px #F00 }
        .second { border:solid 1px #0F0 }
        .third { border:solid 1px #00F }
    </style>
</head>

<body>
    <input type="text" onchange="activitydone()" />

    <a href="#" class="first">first</a>
    <a href="#" class="second">second</a>
    <a href="#" class="third">third</a>
</body>

Why don't you just put that code in with the code that changes the class? — Blender, Jan 02 '13 at 19:28
Please take care to format your code correctly. It makes it much easier and quicker for you and others to read and understand exactly what it's trying to do. Also, you are missing `;` at the end of your javascript and CSS lines. — Rory McCrossan, Jan 02 '13 at 19:30
The "canonical" solution is to use DOM Mutation Observers (http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener/11546242#11546242, https://developer.mozilla.org/en-US/docs/DOM/MutationObserver), but that's generally only necessary when your change-detecting code *must* be separate from the code that does the changing. Please follow @Blender's advice, unless that is impossible for some reason (e.g., your change-detecting code is in a browser extension). — apsillers, Jan 02 '13 at 19:31

score 3 · Answer 1 · answered Jan 02 '13 at 19:30

3

Unless I missed something obvious, just put the code after the class change:

$('a').click(function(){
    $('input').removeClass();
    var cl= $(this).attr('class');
    $('input').addClass(cl);

    alert('class change');
});

Also, semicolons.

answered Jan 02 '13 at 19:30

jbabey

45,965
12
71
94

score 3 · Accepted Answer · answered Jan 02 '13 at 19:30

3

Unless this is an incomplete example...

<script type="text/javascript">
    $(function() {
        $('a').click(function() {
            $('input').removeClass()
            var cl = $(this).attr('class')
            $('input').addClass(cl)
            activitydone(); // <-- Do this?
        })
    })

    function activitydone() {
        alert('class change')
    }
</script>

answered Jan 02 '13 at 19:30

Joseph Marikle

76,418
17
112
129

This should work. Probably no reason to put the alert in a function as per OP's code. – Sethen Jan 02 '13 at 19:32
@SethenMaleno No, probably not, but 10 to 1 this is an incomplete example and I bet OP does a lot more than just an alert in his actual code. – Joseph Marikle Jan 02 '13 at 19:34
@SethenMaleno This is largely speculation, but I think the idea is that `acticitydone` might do many things later in development, so it's more [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) to put that set of actions in a function, rather than including them each time they're needed. – apsillers Jan 02 '13 at 19:34
Thanks. I like this method – jchand Jan 02 '13 at 19:35
@apsillers Then it shouldn't alert "class change" if that's the case. He should pass a parameter and change the alert each time if it's going to be used for a different thing at different parts in the code. This function seems useless without a parameter. – Sethen Jan 02 '13 at 19:40
@JosephMarikle: thanks for the answer can you please answer this question http://stackoverflow.com/questions/14127568/mouseout-and-mouseleave-not-working/14127871#14127871, I am not getting right answer for it – jchand Jan 02 '13 at 19:45

Mark Schultheiss · Answer 3 · 2013-01-02T21:23:06.830

2

You could fire a custom event and handle that:

$(function() {
    $('a').click(function() {
        $('input').removeClass();
        var cl = $(this).attr('class');
        $('input').addClass(cl);
        $('input').trigger('classChange');
    });
    $('input').on('classChange', function() {
        activitydone(this);
    });
})

function activitydone() {
    alert('class change');
};

EDIT NOTE: remove this from your markup: onchange="activitydone()"

Here is a fiddle page you might find useful combining both your questions (in part at least) http://jsfiddle.net/ekKG3/

edited Jan 02 '13 at 21:23

answered Jan 02 '13 at 19:36

Mark Schultheiss

32,614
12
69
100

Note, that this could be MUCH simpler as other comments and answers indicate but should give you a working start...at least – Mark Schultheiss Jan 02 '13 at 19:37
The function does nothing - just following your example as I do not know all of your problem domain. – Mark Schultheiss Jan 02 '13 at 19:42
As I can see you have good hand on jquery can you answer this http://stackoverflow.com/questions/14127568/mouseout-and-mouseleave-not-working/14127871#14127871, I know its hard to fix but can you give a try. Thanks in advance – jchand Jan 02 '13 at 19:47

How to know when an input has changed its class

3 Answers3