单击“<a>` in Javascript

Question

I can't find a way to make it works without using PHP and I don't want to use PHP. The thing is that I have a list with some options :

时如何更改会话变量

当我点击一个链接时，我想设置一个会话变量。

我曾尝试<a onClick="displayAllContainers();">All containers</a>然后在我的JS中尝试过

`function displayAllContainers() {
  console.log("Display all");
}`

但它不起作用。

[编辑]这个小提琴不起作用，但我可以把所有代码放在一起，而不会产生500行的问题

import { Template } from 'meteor/templating';
import { Session } from 'meteor/session'
import { InfosContainers } from '/both/collections/infosContainers.js';
import { InfosMachines } from '/both/collections/infosMachines.js';

import './main.html';
import '../imports/ui/controlPanel.js';
import '../imports/ui/container.js';
import '../imports/ui/machine.js';
import '../imports/ui/chart.js';
import '../imports/ui/controlPanel.html';
import '../imports/ui/container.html';
import '../imports/ui/machine.html'


if (Meteor.isClient) {
  //subscribe the publication of the server
  Meteor.subscribe('infosContainers');
  Meteor.subscribe('infosMachines');
}


function displayAllContainers() {
  console.log("Display all");
}


Template.body.onRendered(function () {
});


Template.body.helpers({
  //return all objects of the collection machines with the specified state
  infosMachines() {
    return InfosMachines.find({});
  },
  //return all objects of the collection containers with the specified state
  infos(state) {
    return InfosContainers.find({stateContainer: state});
  },
  //return all containers
  infosCtn(){
    return InfosContainers.find({});
  },
  //return true if we have >=1 container running. It's the emergency button
  urgence() {
    return InfosContainers.find({stateContainer: 'running'}).count() > 0;
  }
});

  <!-- form containers -->
                        <div class="col-md-6 col-sm-12 col-xs-12">
                            <div class="x_panel">
                                <div class="x_title">
                                    <h2>Containers</h2>
                                    <ul class="nav navbar-right panel_toolbox">
                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                            <ul class="dropdown-menu" role="menu">
                                              <li><a onClick="displayAllContainers();return false;">All containers</a>
                                              </li>
                                              <li><a href="#">Only running containers</a>
                                              </li>
                                              <li><a href="#">Only paused containers</a>
                                              </li>
                                              <li><a href="#">Only stopped containers</a>
                                              </li>
                                            </ul>
                                        </li>
                                        <li><a class="close-link"><i class="fa fa-close"></i></a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="x_content">
                                    <br/>
                                    {{#each infosCtn}}
                                      {{> container}}
                                    {{/each}}
                                </div>
                            </div>
                        </div>
                        <!-- /form containers -->

Answer 1

试试这个， 的 HTML

<a onClick="displayAllContainers()" href="javascript:void(0);">All containers</a> 

JS

function displayAllContainers() {
  console.log("Display all");
}

修改

<强> HTML

<a onClick="Meteor.call('displayAllContainers');
" href="javascript:void(0);">All containers</a> 

<强> JS

Meteor.methods({
    'displayAllContainers': function(){
        console.log("Hello world");
    }
});

Answer 2

这有效，JSFiddle

<script language="javascript">
function displayAllContainers(){
  console.log("Display all");
}
</script>
<a onclick="displayAllContainers()">
  All Containers
</a>

如下所示编写您的函数，它应该可以工作，

displayAllContainers = function(){
  console.log("Display all");
}

我不知道它为什么会起作用，我正在提出一个问题，请将链接放在这里。 SO Question

Answer 3

您需要返回false以防止默认点击行为。 只需改变这种方式：

<a onClick="displayAllContainers();return false;">All containers</a>

Answer 4

好的，谢谢大家的帮助，因为你们都帮助我找到了解决方案，并且有它：

1）我需要在JS中使用模板事件

Template.body.events({
    'click #anchorid': function (e) {
      console.log("saucisse")
    }
});

2）我必须在html中使用ID，但我可以删除onClick

<a id="anchorid">All containers</a>