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

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

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

这是jsFiddle with the complete code

关于改变.closest上下文的JQuery？

1 个答案: