Question

我创建了一个简单的“helloworld”Web组件，其中我放了一个“按钮”标签，我希望通过触发它来点击该按钮，但我无法触发它。我做错了什么？

这是我的“Index.html”文件的代码，我在其中调用了我自己的组件和我的按钮的值：

<!doctype html>
<html>

<head>
  <title>First Polymer component</title>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <script src="bower_components/lib/jquery-1.11.2.js"></script>
  <link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap-theme.css" />
  <script src="bootstrap_theme/js/bootstrap.js"></script>
  <link rel="import" href="hello-world.html">

  <script>
    var button_data = [{
      "name": "litrary vocabulary",
      "span_id": "mostbasic",
      "description": "This is a sample description about litrary vocabulary"
    }, {
      "name": "no contractions",
      "description": "This is a sample description about no contractions"
    }];

    window.addEventListener('WebComponentsReady', function(e) {
      var element = document.querySelector('hello-world');
      element.buttonsdata = button_data;
    });
  </script>
</head>

<body>

  <hello-world> </hello-world>

  <script>
    $('.answerButtons').trigger("click");

    function k12() {
      window.open("http://www.w3schools.com");
    }
  </script>
</body>

</html>

第二个文件包含我的Web组件的代码：

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="hello-world">

  <style>
    p {
      color: red;
    }
  </style>

  <template>
    <template is="dom-repeat" items="{{buttonsdata}}" as="button_data">
      <button type="button" class="btn btn-info answerButtons" onclick = "k12()">{{_getButtonName(button_data)}} </button>
    </template>
    <p>This is my first own component </p>
    <p>This is my first ....... </p>
    <p>Kumaran is IDIOT </p>
  </template>

  <script>
    Polymer({
      is: 'hello-world',
      _getButtonName: function(buttondata) {
        return buttondata.name;
      }
    });
  </script>

</dom-module>

Answer 1

button_data应该是hello-world中的属性对于聚合物绑定https://www.polymer-project.org/1.0/docs/devguide/events.html

，onclick应为on-click

如何使用jquery触发“template”标签内单击的按钮

1 个答案: