javascript - 如何从当前的成功功能触发新的X-Editable打开？

Question

我正在使用 Bootstrap X-editable让人们对他们的个人资料进行内联编辑。用户可以编辑的内容之一会对另一个可编辑的内容产生影响。如果可编辑A(某年)设置为当前年份，则用户也有义务在可编辑B(某税率)中做出决定。

所以可编辑的year的可编辑选项如下:

$('#year').editable({
    pk: 1,
    success: function(response, newValue){
        if (newValue == 2014){
            $('#tax_rate').trigger('click');
        } else {
            $('#tax_rate').html(2);
        }
    }
});

EXAMPLE FIDDLE HERE

除 2014 年外，此行为正常，它确实将正确的值发布到后端，随后确实点击/打开 #tax_rate，但不知何故，点击阻止了新年在 #year 中正确显示。如果我刷新页面，年份会再次正确显示，但就在我尝试触发另一个可编辑项时，它在保存后不会正确显示年份。试试打开 the fiddle并将年份更改为 2014 年，看看我的意思。

那么有人知道我如何在 DOM 中更新新年并单击/打开可编辑的 tax_rate 吗？欢迎所有提示!

Answer 1

我建议您使用异步 UI 交互:

像这样:

$('#year').editable({
    pk: 1,
    success: function(response, newValue){
        if (newValue == 2014){
          setTimeout(function(){
             $('#tax_rate').trigger('click');
          }, 0); 
        } else {
            $('#tax_rate').html(2);
        }
    }
});

我认为它应该可以正常工作

添加:
您也可以使用 vanillaJS 框架触发 click 事件。
我认为 $.trigger 导致了一些 UI 更新错误。
很简单:

document.getElementById('tax_rate')
  .dispatchEvent(new Event('click'));