Question

我想根据ajax发布结果切换google material design lite (MDL)复选框，但似乎无效。

然后我做了一些测试：我发现普通复选框或者ajax都可以使用。并且失败的实际值复选框已更改，但UI保持不变。

此处的代码： `

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

A1<input type="checkbox" id="A1" value="A1"><br>
A2<input type="checkbox" id="A2" value="A2">
<hr>
B1
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="B1">
    <input type="checkbox" id="B1" class="mdl-switch__input">
    <span class="mdl-switch__label"></span>
</label>
B2
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="B2">
    <input type="checkbox" id="B2" class="mdl-switch__input">
    <span class="mdl-switch__label"></span>
</label>

<script>
    console.log('initial');
    console.log('->'+$('#A1').is(':checked') + $('#A2').is(':checked')
            + $('#B1').is(':checked') + $('#B2').is(':checked'));
    // now toggle the 4 checkbox; A2 and B2 under post funciton
    $("#A1").prop("checked", true);
    $("#B1").prop("checked", true);
    $.post("#", function (data) {
        console.log("...");
        $("#A2").prop("checked", true);
        $("#B2").prop("checked", true);
        console.log('after toggle');
        console.log('->'+$('#A1').is(':checked') + $('#A2').is(':checked')
                + $('#B1').is(':checked') + $('#B2').is(':checked'));
    });
</script>
`

或codepen online。复选框A1，A2，B1工作。 B2无效但其值为true（请参阅浏览器控制台）。

我忘记了什么或者它是一个错误？任何评论都表示赞赏。

Answer 1

我自己有一个解决方法。我使用触发器（'click'）代替，这将调用mdl javascript（虽然我没有阅读它们）来更新css。

由于点击事件的模拟将与其自身冲突（当点击中存在点击触发时导致无限的ajax请求循环），因此需要使用鼠标/程序事件的检测。示例代码如下：

 $('#checkbox').click(function(event) {
  var $this = $(this);
  if (event.originalEvent.isTrusted) {
    //manual click
    $.post("#", {a: 0}, //post something to server
       function(data) {
      console.log('!! a post request !!!');
      target = data;//...parse the target from ajax result
      ($this.is(':checked') !== target) && $this.trigger('click');
    });
  } else {
    //program click
    console.log('++program++');
    $this.trigger('click');
  }
});

从程序调用时，代码如下：

  $.post("#", {a: 0}, function(data) {
    console.log('!! a post request !!!');
    target = data;
    ($('#checkbox').is(':checked') !== target) && $('#checkbox').trigger('click');
  });

因此，使用这些代码，手动点击或程序点击只会调用一次ajax请求。

在ajax帖子中，Jquery无法切换MDL复选框

1 个答案: