Question

我有一个paper-radio-group来监听事件paper-radio-group-changed。当有人手动单击单选按钮时，此事件会完全触发，但在脚本分配时不会触发。这是我通过脚本分配它的方式

<paper-radio-group id="prg">
    <paper-radio-button name="a">A</paper-radio-button>
    <paper-radio-button name="b">B</paper-radio-button>
    <paper-radio-button name="c">C</paper-radio-button>
</paper-radio-group>

...
<script>
    $("#prg").selected = "a";
    $(document).on('paper-radio-group-changed', '#prg', {}, function (e) {
      //Whatever here is not executed
    });
</script>

更多观察：

单选按钮"a"实际上已被选中。但事件永远不会被解雇。为什么？我选择了错误的事件监听器还是需要其他事件监听器？

Answer 1

你需要在聚合物中思考。

HTML

DISPLAY

JS

<paper-radio-group selectedAttribute="name" selected="{{selected}}">

Answer 2

通过方法paper-radio-group-changed进行选择更改时会触发

select(itemName)：

// paper-radio-group-changed

let prg = document.querySelector('#prg');

prg.select('b');

prg.addEventListener('paper-radio-group-changed', e => {
    alert('paper-radio-group-changed');
});
// jQuery on() works as well

使用selected的{{1}}事件可以听取Polymer.IronSelectableBehavior属性的更改：

selected-changed

查找有关paper-radio-group及其活动here的更多信息。

关于jQuery + Polymer的两个注释

使用jQuery Using jQuery with shadow dom不容易选择Shadow DOM中的元素。

使用jQuery设置自定义属性并不总是表现出Polymer期望的结果：

// selected-changed

prg.selected = 'b';

prg.addEventListener('selected-changed', e => {
    alert('selected-changed');
});

因此，在这种情况下，选择$('#prg').attr({foo: 'bar'}); // These syntaxes should work $('#prg').attr('foo': 'bar'); // However for the attribute 'selected', being a valid HTML // attribute which accepts a true/false (set/undefined) value pair, // the value is ingored by jQuery resulting in selected="selected" $('#prg').attr('selected', 'b');可能更安全。

请注意，如果您将document.querySelector()放在另一个聚合物元素（即<paper-radio-group id="prg">）内，则可以使用<my-app></my-app>访问它：

this.$

https://www.polymer-project.org/2.0/docs/devguide/dom-template#node-finding

当脚本选择单选按钮时，paper-radio-group-change不会触发

2 个答案:

关于jQuery + Polymer的两个注释