Question

当我在同一个文档主体上创建一个新div时，让我们说一堆div，我松开了对前一个div上.ts功能的引用，我试着用一个按钮来模拟它，所以我有div与：

<div id="foo">
<button type="button" id="btn1" (click)="clickButton()">Click Me</button>
</div>

这有效..现在我点击该div上的一个函数创建一个带有新内容的新div，新创建的按钮（click）=“clickButton（）”适用于最后一个div，但不再适用于前一个（开放的一个）（该按钮仅适用于最后打开的div，但不适用于之前的div ..）

我的.ts有：

clickButton = function() {
alert("button clicked");
};

ps：我正在使用angular4和typescript：

Answer 1

尝试从按钮中删除id或使用[attr.id] =“'foo'+ index”

在元素上指定新的id

Answer 2

我解决了它，只需添加一个Jquery函数onInit，它检查是否点击了该特定div上的按钮，然后调用该函数。

HTML：

<button data-id="{{eval('relatedInstance.instance.' + property.key + '.' + property.concept.idKey)}}" data-name="{{property.concept.name}}" >Click Me2</button>

打字稿：

$("div").on("click","button","", test);
   function test(){
      //alert($(this).data("id") + 'Clicked!' + this.id);
   alert(this.name+ ' - ' +this.id);
   };

希望这可以帮助有同样问题的人！

添加Angular4时添加的动态内容在创建新div时无效

2 个答案: