Почему не работает jquery после замены элемента?

Question

[istasiik]

По нажатию на кнопку включается скрипт, который меняет ее на другую. Вот

$(".button-white").replaceWith("<button class='send-feed'>Отправить</button>");

По нажатию на кнопку с классом send-feed должен включатся еще один скрипт, но он никак не реагирует. Вот он:

<script>
    $(function() {
    $( ".send-feed" ).click(function() {
        
        $(".prepp-hidden-block").animate({
        height:'toggle'
        }, 600).delay(50).queue(function(){
        
        $(".request-bounce").addClass( 'animated bounceIn' );

        $(this).dequeue();
    });
    });
    });
</script>

В чем может быть проблема?

Answer 1

[ultrbi4]

$(function() {
    $( "родительский элемент" ).on(".send-feed", "click", function() {
        
        $(".prepp-hidden-block").animate({
        height:'toggle'
        }, 600).delay(50).queue(function(){
        
        $(".request-bounce").addClass( 'animated bounceIn' );

        $(this).dequeue();
    });
    });
    });

Тогда будет отслеживание новых элементов. А в Вашем случае, евент навешан на существующий элемент.

Comments

[istasiik]

А родительский элемент - это класс предыдущей кнопки?

[ultrbi4]

родительский - это элемент стоящий на уровень выше.

[istasiik]

Мой элемент находился в данном div:

<div class="landing">
            <h1>Prepp</h1>
            
            <div class="new-request-block">
                
                <div class="request-bounce">
                <textarea placeholder="Введите ссылку на товар" id="request"></textarea>
                
                <div class="taste-request">Минимализм</div>
        
                <div class="taste-request">Кэжуал</div>
                
                                <div class="taste-request">Классика</div>
        
                <div class="taste-request">Мода</div>
                </div>
                
            </div>
        
            <button class="button-white">Получить преппы</button>
        </div>

Я пишу вот так:

<script>
$(function() {
    $( ".landing" ).on(".send-feed", "click", function() {
        
        $(".prepp-hidden-block").animate({
        height:'toggle'
        }, 600).delay(50).queue(function(){
        
        $(".request-bounce").addClass( 'animated bounceIn' );

        $(this).dequeue();
    });
    });
    });
</script>

Не знаю, влияет ли это, но кроме замены кнопки на .send-feed на клик навешены другие скрипты. Вот они:

<script>
    $(function() {
    $( ".button-white" ).click(function() {
        
        $(".new-request-block").animate({
        height:'toggle'
        }, 600, 'easeOutBack').delay(50).queue(function(){
        
        $(".request-bounce").addClass( 'animated bounceIn' );

        $(this).dequeue();
            });

        $(".button-white").replaceWith("<button class='send-feed'>Отправить</button>");
    });
    });
</script>

[istasiik]

не работает почему то

Answer 2

[Илья Плотников]

Используйте .on
api.jquery.com/on