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

Question

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

因此可编辑年份的可编辑选项如下:

$('#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'));