CODEWITHSUNDEEP
javascriptjqueryclickaddclass
Jishad
Jishad

Reputation: 2965

Jquery addClass -- Function for New Class

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..

  1. One Button has class named abc
  2. When click on it an ajax function will storing current time in database.(ajax function not in stack-code).
  3. after successful ajax response the button class changed to testingClass.
  4. now the class name of the button is testingClass
  5. 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.
  6. Then the Button class name will changed to old ( abc).

Upvotes: 1

Views: 204

Answers (2)

Dhiraj
Dhiraj

Reputation: 33618

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>

Upvotes: 1

Sadikhasan
Sadikhasan

Reputation: 18600

You need to event delegation for dynamic added element

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

 });

Event delegation

Upvotes: 1

Related Questions