Onclick не работает после удаления / добавления класса с помощью jquery

Question

Onclick не работает после удаления / добавления класса с помощью jquery

0

Я хочу понять, почему этот код работает только с первым onclick:

HTML:

    <div id="TheCarouselPlay">
        <button type="button" class="btn btn-warning btn-xs pause">
            <i class="fa fa-pause"></i>
        </button>
    </div>

ЯШ:

/* pause & play */
$('#TheCarouselPlay button.pause').click(function () {
    $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play');
    $(this).removeClass('pause').addClass('play');
});
$('#TheCarouselPlay button.play').click(function () {
    $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause');
    $(this).removeClass('play').addClass('pause');
});

http://jsfiddle.net/W59Me/4/

JoDiii 31 март 2014, в 03:09

Источник

Теги:

javascript

jquery

4 ответа

Ещё вопросы

jamis0n · Answer 1 · 2014-03-30T22-58-00.000Z

Это можно сделать с помощью одного обработчика щелчка, проверяя текущее состояние, на основе которого в данный момент находится кнопка:

$('#TheCarouselPlay button').click(function () {
    if($(this).hasClass('play')){
      $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause');
      $(this).removeClass('play').addClass('pause');
    } else{
      $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play');
      $(this).removeClass('pause').addClass('play'); 
    }
});

Вот скрипка: http://jsfiddle.net/gW2pn/

Это должно работать, потому что в вашем коде у div есть и классы, и пауза, и игра одновременно

Erick A. Montañez · Answer 2 · 2014-03-30T21-47-00.000Z

Вы должны использовать on()

/* pause & play */
$('#TheCarouselPlay').on('click','button.pause',function () {
    $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play');
    $(this).removeClass('pause').addClass('play');
});
$('#TheCarouselPlay').on('click','button.play',function () {
    $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause');
    $(this).removeClass('play').addClass('pause');
});

Поскольку button.play не существует, когда вы определили событие click.

Clayton · Answer 3 · 2014-03-30T21-38-00.000Z

Вместо этого попробуйте использовать обработчики событий:

    /* pause & play */
$('#TheCarouselPlay').on('click', 'button.pause', function () {
    $('#TheCarouselPlay i').removeClass('fa-pause').addClass('fa-play');
    $(this).removeClass('pause').addClass('play');
});
$('#TheCarouselPlay').on('click', 'button.play', function () {
    $('#TheCarouselPlay i').removeClass('fa-play').addClass('fa-pause');
    $(this).removeClass('play').addClass('pause');
});

Вот новая скрипка: http://jsfiddle.net/xe79K/

denizvatan · Answer 4 · 2017-04-26T10-34-00.000Z

setTimeout будет делать трюк. Вот пример:

    setTimeout(function(){
       $(this).removeClass('play').addClass('pause');
    }, 100);

Можете ли вы объяснить, почему код, который вы указали, решает проблему? Это было бы намного лучше, чем ответ только на код :)