Question

我想要的是我没有像

这样的链接

<a href="javascript:void(0)" class="popup-link">sample Link 1</a> <a href="javascript:void(0)" class="popup-link">sample Link 2</a>

我希望在用户点击链接时调用静态html。为此我写了一段代码

    AUI().ready(
 'aui-aria',
  'aui-dialog',
  'aui-overlay-manager',
  'dd-constrain',
  function(A) {
    A.all('.popup-link').on('click',
      function() {
         var dialog = new A.Dialog({
              bodyContent: 'Loading...',
              centered: true,
              title: 'Sample Popup Content',
              width: 400,
              height:600
            }
          ).render();

          dialog.plug(
            A.Plugin.IO,
            {
              autoLoad: false,
              uri: '/html/sample.html'
            }
          );

          dialog.io.start();
        });
  });

但是这不起作用，当我点击链接时它根本就没有调用该函数，我也尝试了这个，但同样的事情

    AUI().ready(
  'aui-aria',
  'aui-dialog',
  'aui-overlay-manager',
  'dd-constrain',
  function(A) {
    A.all('.sample-popup').each(function() {
      this.on('click', function(A){
           .....
           ......

知道这里有什么问题吗？

Answer 1

最后我明白为什么它不起作用。我也在点击功能中使用相同的对象“A”。

它应该是这样的:(看一下变量名称事件）

AUI().ready(
  'aui-aria',
  'aui-dialog',
  'aui-overlay-manager',
  'dd-constrain',
  function(A) {
    A.all('.sample-popup').each(function() {
      this.on('click', function(event){
           .....
           ......

Answer 2

我对 AUI 了解不多，但是如果你想使用 jQuery 来实现相同的任务，你可以实现这样的目标

即

<script>
$(document).ready(function() {

  $('.popup-link').click(function(){
      alert($(this).text());
  });

});
</script>

或者

使用Javascript

即

<a href="#" onclick="return theFunction();">Link</a>

<script type="text/javascript">
    function theFunction () {
        // return true or false, depending on whether you want to allow the `href` property to follow through or not
    }
</script>

HTH

如何在具有相同css类名的所有元素的click函数上调用合金ui

2 个答案: