после добавления манипуляции DOM, прежде чем Ajax вызова, дом не сохраняя после AJAX

Question

DEMO LINK

Текущий поток ScreenShoot для Ref:

Иам Добавление класса к элементу и пытается чтобы сосредоточиться. для статических элементов его рабочий тон. но всякий раз, когда я вызываю запрос ajax. класс, который я добавил, не сохраняет его удаление.

JS:

$('#search-refine-bar').on('click', function(e) { 
    var eventNode = e.target.nodeName; 
    $('.highlight').removeClass('highlight').removeAttr('tabindex focus style').css({ 
     "border": "" 
    }); 
    setTimeout(function() { 
     alert(eventNode + " --------------- " + 'In Progress adding focus'); 
     $(e.target).attr({ 
      tabindex: "-1", 
      focus: "focus" 
     }).addClass('highlight').focus().css({ 
      "border": "1px solid #f00" 
     }); 
     alert(eventNode + " --------------- " + 'Done status') 
    }, 1000); 

}); 

Answer 1

После первого щелчка, все выглядело хорошо для меня.

Ваше событие щелчка мышью на DIV, который содержит все, так что вы также маркировка <p> теги и т.д. Я не уверен, если вы хотите, чтобы это ...

probelm есть, когда вы нажимаете agian где-, вы delting все с этим кодом ...

$('.highlight').removeClass('highlight').removeAttr('tabindex focus style').css({ 
    "border": "" 
}); 

И им не уверен, что вы пытаетесь достичь с помощью этого кода ..

Im просто угадать, вы пытаетесь что-то вроде этого скрипки: http://jsfiddle.net/589hq620/

Но ваш вопрос, убрав этот код является ответом ...