Javascript 余烬生成的操作或jquery onclick

我有一个余烬的应用程序，工作良好。但用户的交互会进行一些DOM插入，如下所示

$(.test).append(<a {{action "getData"}}>Get Data</a>);

$（.test）.append（获取数据）；

问题是Ember似乎没有意识到一个操作“getData”已经添加到DOM中。当我单击元素时，没有发生任何事情。有什么想法吗

我尝试的另一种方法是：

 //create the element
 $(.test).append(<a id="idnum">Get Data</a>);

 //make click listener
 $('#idnum').click(function(){
 console.log("get data");
}

//创建元素
$（.test）.append（获取数据）；
//生成单击侦听器
$（'#idnum'）。单击（函数（）{
log（“获取数据”）；
}

---

我的问题是，我应该将代码放在组件中的什么位置，以便它可以侦听单击事件。谢谢。

您应该以余烬方式执行此操作。请尝试handlebars{{{if}}}帮助器动态呈现元素

{{#if canGetData}}
<a {{action "getData"}}>Get Data</a>
{{/if}}

{{{#if canGetData}
获取数据
{{/if}

---

在这里，您可以根据用户操作在控制器中将canGetData的值设置为true。

您应该以余烬方式进行设置。请尝试handlebars{{{if}}帮助器动态呈现元素

{{#if canGetData}}
<a {{action "getData"}}>Get Data</a>
{{/if}}

{{{#if canGetData}
获取数据
{{/if}

---

在这里，您可以根据用户操作在控制器中将canGetData的值设置为true。

类似于Lux建议避免DOM操作。我更喜欢以下方法，
如果它是动态的，那么可以考虑将DOM元素封装为一个新组件并使用组件助手。 查找样本

在application.js中

    export default Ember.Controller.extend({
      appName: 'Ember Twiddle',
      linksArray:[ Ember.Object.create({value:'Text to display',routename:'home'}),
                   Ember.Object.create({value:'Text to display2',routename:'home'})],
      actions:{
        addItem(){
           this.get('linksArray').pushObject(Ember.Object.create({value:'AddedDynamically',routename:'home'}));
        }
      } 
    });

in Application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{#each linksArray as |item|}}
 {{component 'link-to' item.value item.route }}
{{/each}}
<button {{action 'addItem'}}>Add Item</button>
<br>
{{outlet}}
<br>
<br>

欢迎来到{{appName}


{{{#每个链接都作为|项}
{{component'链接到'item.value item.route}}
{{/每个}}
添加项


{{outlet}}

我建议避免DOM操作。我更喜欢以下方法，
如果它是动态的，那么可以考虑将DOM元素封装为一个新组件并使用组件助手。 查找样本

在application.js中

    export default Ember.Controller.extend({
      appName: 'Ember Twiddle',
      linksArray:[ Ember.Object.create({value:'Text to display',routename:'home'}),
                   Ember.Object.create({value:'Text to display2',routename:'home'})],
      actions:{
        addItem(){
           this.get('linksArray').pushObject(Ember.Object.create({value:'AddedDynamically',routename:'home'}));
        }
      } 
    });

in Application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
{{#each linksArray as |item|}}
 {{component 'link-to' item.value item.route }}
{{/each}}
<button {{action 'addItem'}}>Add Item</button>
<br>
{{outlet}}
<br>
<br>

欢迎来到{{appName}


{{{#每个链接都作为|项}
{{component'链接到'item.value item.route}}
{{/每个}}
添加项


{{outlet}}

第一个示例无法工作，因为ember不分析DOM中的Handlebars元素，而是使用HTMLBars（一个完整的HTML解析器）解析Handlebars模板，然后通过在DOM中插入元素（而不是文本）手动呈现

然而，第二个例子是一种方法，如果您必须依赖于执行手动DOM操作的外部代码，并且它确实有效

这确实有效：

this.$('.target').append('<a id="idnum">Get Data</a>');

this.$('#idnum').on('click', () => {
    alert('clicked');
});

this.$（'.target'）.append（'Get Data'）；
这是。$（'#idnum'）。在（'click'，（）=>{
警报（“点击”）；
});

---

只需确保DOM已准备就绪。因此，请在

didInsertElement

钩子中或在用户单击按钮后执行此操作。

第一个示例无法工作，因为ember不分析DOM中的Handlebars元素，而是使用HTMLBars解析Handlebars模板，HTMLBars是一个完整的HTML解析器，然后将其呈现为manua通过在DOM中插入元素（而不是文本）来简化操作

然而，第二个例子是一种方法，如果您必须依赖于执行手动DOM操作的外部代码，并且它确实有效

这确实有效：

this.$('.target').append('<a id="idnum">Get Data</a>');

this.$('#idnum').on('click', () => {
    alert('clicked');
});

this.$（'.target'）.append（'Get Data'）；
这是。$（'#idnum'）。在（'click'，（）=>{
警报（“点击”）；
});

---

只需确保DOM已准备就绪。因此，在

didInsertElement

钩子中或在用户单击按钮后执行此操作。

如果使用ember，则应避免手动操作DOM。您是否考虑过使用把手

{{If}

要呈现要附加的元素吗？您好，我想我的示例太简单了，插入的DOM实际上是由第三方jquery库（w2ui网格）呈现的，在它从ajax调用获取数据后，它呈现一个包含多个Get数据的表列，这就是{{{if}}似乎不是一个选项。如果您使用ember，您应该避免手动操作DOM。您是否考虑过使用手柄

{{{If}}

来呈现要附加的元素？您好，我想我的示例太简单了，插入的DOM实际上是由第三方jquery库（w2ui网格）呈现的从ajax调用中获取数据后，它会呈现一个包含多个Get数据的表列，这就是为什么{{{if}}似乎不是一个选项。您可以放置$（'#idnum'）。单击组件的diInsertElement钩子中的（function（）{console.log（“Get data”）}代码。您可以放置$（'#idnum'）。单击（function（）{console.log（“Get data”）}如果一个问题解决了你的问题，考虑接受这个答案，这样它就被列为被接受了。也考虑增加投票，而不是感谢你的评论。如果另一个用户发现这个页面，他们会帮助更多。是的，我想……但是我得到通知说我的投票没有显示，但是它被计算了…又一个问题！如果一个问题解决了你的问题，考虑接受答案，所以它被列为被接受的。也考虑投票，而不是感谢你的评论。如果另一个用户发现这个页面，他们会帮助更多。是的，我想……但是我得到通知说我的投票不显示，但是它被计算了…再次感谢！