简体   繁体   English

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

[英]How to trigger a button as clicked present inside “template” tag using jquery

I've created a simple "helloworld" web component, in that I put a "button" tag and I want that button to be clicked by triggering it but i'm unable to trigger it. 我创建了一个简单的“ helloworld” Web组件,在其中放置了“按钮”标签,并且希望通过触发它来单击该按钮,但是我无法触发它。 What am I doing wrong? 我究竟做错了什么?

Here is my code for "Index.html" file in which i've called my Own component and values for my button: 这是我的“ 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>

And the 2nd file contain code for my web component: 第二个文件包含我的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>

button_data应该是hello-world一个属性onclick应该被on-clickon-click Polymer绑定https://www.polymer-project.org/1.0/docs/devguide/events.html

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM