Почему перестает срабатывать событие click?

Question

[Nathan Stark]

Доброго всем !
Есть такой ужасный код (

$("#start-ajax, #stop-ajax").on('click',function(e){
        var data = {
            "action" : $(this).data("action")
        };
        var Action;
        e.preventDefault();

        if( $(this).data('action')=="start"){
            Action="start";
            data["project"] = $(".StartInpAjaxProject").val(),
            data["time"]    = $(".StartInpAjaxTime").val(),
            data["comment"] = $(".StartInpAjaxComment").val(),
            data["ratio"]   = $(".StartInpAjaxRatio").val(),
            data["id"]      = $(".StartInpAjaxID").val();
        }else if( $(this).data('action')=="stop"){
            Action="stop";
            data["id"] = $(this).data('id');
        }

        $.ajax({
            type    : "POST",
            cache   : false,
            url     : "/time.php",
            data    : data,
            dataType: "html",
            success : function(html){
                if( Action=="start" ) {
                    $("#DashStart").hide();
                    $('#DashStatus').show();
                    $('nav > .uk-navbar-nav').prepend('<li id="NS-Button-stop"><a href="" class="uk-button" id="stop-ajax" data-action="stop" data-id="'+html+'"><i class="uk-icon-medium uk-icon-stop"></i></a></li>');
                    timer = CountDown(0);
                    //$('#NS-Button-add').remove();
                }else if( Action=="stop" ) {
                    $("#DashStart").show();
                    $("#NS-Button-stop").remove();
                    clearTimeout(timer)
                    //$('nav > .uk-navbar-nav').prepend('<li id="NS-Button-add"><a href="#" class="uk-button"><i class="uk-icon-medium uk-icon-plus"></i></a></li>');
                }
            }
        });

    });

Вся проблема начинается когда после срабатывания #start-ajax. Все проходит успешно и добавляется на сайте
'
Это кнопка #stop-ajax
Но она не срабатывает, вернее сработает после перезагрузки страницы. Я так понимаю тут связь какая то с тем что в DOM дереве появился новый элемент но событие $("#start-ajax, #stop-ajax").on('click',function(e){ для него не отрабатывается. Кто то может просветить почему, вроде on должен подхватывать новые элементы DOM дерева...

Answer 1

[Stalker_RED]

вроде on должен подхватывать новые элементы DOM дерева

В том виде, как вы написали - не должен.

У вас нет кнопки, вы пытаетесь повесить на нее обработчик - не получается.
Позже вы добавляете кнопку, но повторной попытки повесить обработчик никто не делает.

Но можно сделать по-другому:

$('body').on('click', '#stop-ajax', function(){
  // code here
})

Вместо body можно использовать любой родительский элемент, который существует в момент навешивания обработчика.

Comments

[Nathan Stark]

))) почти успели. Спасибо за разъяснение, я теперь понял ошибку свою

Answer 2

[Nathan Stark]

Разобрался сам )
Может кому пригодиться.
Немного переправить строку надо вызова события.

$("body").on('click','#start-ajax, #stop-ajax',function(e){