JQuery 更改.closest 上下文？

Question

我有一个表单，我可以在其中更改 select 字段时的字段集。

我的 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

理解问题后，我想我有一个解决方案：在 ajax 成功时重新附加事件：

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

这是一个jsFiddle with the complete code

JQuery 更改.closest 上下文？

JQuery on change .closest context?

jquery

onchange

this

closest