jquery - Angular 8 和 jQuery：想要调用一个函数

Question

我想调用一个单击动态生成的 URL 的函数。

var push_div = '<a href="javascript:void(0)" onclick="myFunc('1')">Hello1</a></div>' + '<a href="javascript:void(0)" onclick="myFunc('2')">Hello2</a></div>';

myFunc(e) {
  console.log(e);
}

但我收到一个错误：

未捕获的 ReferenceError：未定义 myFunc

然后我修改了我的代码，如下所示：

var push_div = '<a id="1" href="javascript:void(0)">Hello1</a></div>' + '<a id="2" href="javascript:void(0)">Hello2</a></div>';


$(document).on('click', $(push_div).find('a').eq(0), function() {
  // my code
});

这不是安慰我任何错误，但是，我无法检测到我单击了哪个超链接。任何想法？

标签： jqueryangular

Answer 1

可以查看被点击链接的id属性，根据不同的id调用函数。这是演示

这是快速解释，

你需要做的就是，

在组件文件中准备 HTML 数据。

var push_div =
      '<a id="1" href="javascript:void(0)">Hello1</a></div>' +
      '<a id="2" href="javascript:void(0)">Hello2</a></div>';

获取要在其中附加此 HTML 数据的 div 的引用。

const div = document.getElementById("wrapper");
$(div).html(push_div);

在新创建的锚标签上添加点击事件监听器，

$(div).find('a').on("click", ev => {
      switch (ev.target.id) {
        case "1":
          this.myFunction1();
          break;
        case "2":
          this.myFunction2();
          break;
      }
    });

而已。顺便说一句，您可能想在 Angular 应用程序中执行此操作，但实际上此逻辑与 Angular 应用程序无关。这是一个纯 JavaScript 的东西。我希望这将有所帮助。

在这里，我想分享整个组件文件。

import { Component, AfterViewInit } from "@angular/core";
import $ from 'jquery';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  name = "Angular";

  ngAfterViewInit(): void {
    const div = document.getElementById("wrapper");

    var push_div =
      '<a id="1" href="javascript:void(0)">Hello1</a></div>' +
      '<a id="2" href="javascript:void(0)">Hello2</a></div>';

    $(div).html(push_div);

    $(div).find('a').on("click", ev => {
      switch (ev.target.id) {
        case "1":
          this.myFunction1();
          break;
        case "2":
          this.myFunction2();
          break;
      }
    });
  }

  myFunction1() {
    alert(1);
  }

  myFunction2() {
    alert(2);
  }
}