JQuery об изменении .closest context?

Question

У меня есть форма, где я изменяю набор полей при изменении полей выбора.

Мой HTML выглядит следующим образом:

<div class="ajx" id="ajx_1"> 
    <fieldset> 
     <legend>Inhalt</legend> 
     <select id="u_article" ...> 
     ... 
    </fieldset> 
</div> 

Со следующим JQuery работает для всех современных браузеров:

$(".ajx").on("change", function() { 
    var $this = $(this); 
    console.log($this) 

    // ... additional code for understanding what I want to do: 
    var $form = $('form'); 
    var method = $form.attr("method").toUpperCase(); 
    var $this = $(this).closest('.ajx'); 
    var $ser = $(".ajx select").serialize(); 
    var $ser2 = $(".ajx input").serialize(); 

    $.ajax({ 
     url: $form.attr("action"), 
     data: $ser, 
     type: method, 
     success: function(res) { 
      var $fnd = '#' + $this.attr('id') + ' fieldset'; 
      $this.html($(res).find($fnd)); 
     }, 
     error: function (xhr, status) { 
      alert('Unknown error - status: ' + status); 
     } 
    }); 
}); 

В консоли Firefox я могу видеть, что есть объект и контекст Object[div#ajx_1.ajx].

Теперь выше не работает для старых Firefox, как FF7 или FF3.6, потому что мне нужно установить change прямо в соответствующие поля.

Я пробовал с этим JQuery код:

$(".ajx select").on("change", function() { 
    var $this = $(this).closest('.ajx'); 
    console.log($this) 
    // ... 
}); 

Теперь объект является правильным, но когда я открыть объект в консоли я получаю что-то другое в контексте: select#u_article.

Кажется, он выбирает мой select вместо div как элемент здесь.

Почему это и как я могу это изменить?

Answer 1

После того, как я понял вопрос, я думаю, что у меня есть решение: Установите на место события OnSuccess из Аякса:

$this.find("select").on("change", theChangeFunction); 

Вот это jsFiddle with the complete code