Функция Jquery addClass для нового класса

У меня проблема в моем файле js. Это мой Js-код.

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

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

    });
  });
</script>

Мой HTML:

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

Когда я загружаю эту страницу в браузер, функция addClass успешно выполняется и добавляет новый класс с именем «testingClass».

Но когда вы пытаетесь снова щелкнуть эту кнопку (имеется в виду: class = "testingClass"), функция оповещения не работает. В чем ошибка?

Разве JS не поддерживает частое выполнение элемента? Кто-нибудь Пожалуйста, помогите мне.

Шаги..

  1. Одна кнопка имеет класс с именем abc
  2. При нажатии на нее функция ajax будет хранить текущее время в базе данных (функция ajax не в коде стека).
  3. после успешного ответа ajax класс кнопки изменился на testingClass.
  4. теперь имя класса кнопки — testingClass
  5. Через некоторое время снова нажмите кнопку (класс с именем: testingClass), я хочу вызвать функцию ajax с текущим временем клика и сохранить значения в базе данных.
  6. Затем имя класса Button изменится на старое ( abc ).

javascript click jquery addclass
person Jishad    schedule 15.03.2015    source источник
comment
Пожалуйста, проверьте, stackoverflow.com/questions/1359018/   -  person Karthikeyan    schedule 15.03.2015
comment
Отредактировал вопрос   -  person Jishad    schedule 15.03.2015

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно event delegation для динамического добавления элемента

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

 });

Делегирование событий

person Sadikhasan    schedule 15.03.2015
comment
Это работает с обеими функциями одновременно, я хочу добавить класс в 1-й и следующий. - person Jishad; 15.03.2015
comment
Что вы хотите после добавления класса? Я не знаю, что ты хочешь? - person Sadikhasan; 15.03.2015

arrow_upward
1
arrow_downward

Обновлять

Для измененного вопроса вы ищете что-то вроде этого. Вот демонстрация.

$('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
    });
}

Использование .one() поможет вам прикрепить событие только один раз после нескольких кликов.

Этот обработчик выполняется не более одного раза для каждого элемента каждого типа события.

Я думаю, это то, что вы ищете. Добавление обработчика после добавления класса.

$(".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>

person Dhiraj    schedule 15.03.2015