Jquery addClass -- Function for New Class

Question

I have a issue in my js file. This is my Js Code.

<script type="text/javascript">
 $(document).ready(function()
   {

    $(".abc").click(function()
    {
     $(this).addClass('testingClass');
    });
    $(".testingClass").click(function()
    {
      alert("hiiiiiiiiiiiiiiiiii")

    });
  });
</script>

My HTML :

<button class="abc">Demo</button>

When i load this page in Browser, The addClass function is successfully executing and adding new class named "testingClass".

But When Try to click again t that button (meens : class="testingClass") the alert function does not working. What is the error.

Is JS is not supporting frequent execution of an element ? Anybody Please help me.

Steps..

One Button has class named abc
When click on it an ajax function will storing current time in database.(ajax function not in stack-code).
after successful ajax response the button class changed to testingClass.
now the class name of the button is testingClass
After some time Click on the Button again (class named:testingClass), i want to call a ajax function with current time of click and store the values in database.
Then the Button class name will changed to old ( abc).

Please check, http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements — Karthikeyan, Mar 15 '15 at 04:05

score 1 · Answer 1 · answered Mar 15 '15 at 04:03

1

You need to event delegation for dynamic added element

$(document).on("click",".testingClass",function()
 {
   alert("hiiiiiiiiiiiiiiiiii")

 });

Event delegation

answered Mar 15 '15 at 04:03

Sadikhasan

18,365
21
80
122

This working both functions at a time, i want to add class in 1st and next. – Jishad Mar 15 '15 at 04:08
What you want after adding class? I dont know what you want? – Sadikhasan Mar 15 '15 at 04:11

Dhiraj · Answer 2 · 2015-03-15T13:03:49.453

Update

For the changed question, you are looking for something like this. Here is a demo.

$('body').on('click', '.abc', function () {
    // event attached to .abc
    // updateTime is a method that takes context (this), current timestamp and a function
    // we need to send the context so that we have access to the current 
       element inside the below function which is executed outside the scope
    updateTime.call(this, new Date().getTime(), function (data) {
        $(this).addClass('testingClass').removeClass('abc');
        $('#log').append('Time: ' + data + 'from abc <br/>');
    });
}).on('click', '.testingClass', function () {
    // event attached to .abc
    updateTime.call(this, new Date().getTime(), function (data) {
        $(this).addClass('abc').removeClass('testingClass');
        $('#log').append('Time: ' + data + ' from testingclass <br/>');
    });
});

function updateTime(currentTime, successCallback) {
    $.ajax({
        context: this, // the context sent from the above methods is used here
        url: '/echo/html/',
        data: {
            html: currentTime
        },
        method: 'post',
        success: successCallback
    });
}

Using .one() will help you attach event only once upon multiple clicks.

This handler is executed at most once per element per event type.

I think this is what you are looking for. Adding a handler after the class is added.

$(".abc").click(function(){
    $(this).addClass('testingClass');
    $(".testingClass").one('click', function() {
      alert("hiiiiiiiiiiiiiiiiii");
    });
  });

$(document).ready(function() {

  $(".abc").click(function() {
    $(this).addClass('testingClass');
    $(".testingClass").one('click', function() {
      alert("hiiiiiiiiiiiiiiiiii");
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="abc">Demo</button>

Jquery addClass -- Function for New Class

2 Answers2

Update