Javascript 无法将jQuery append与onsenui CSS和Angular一起使用

我正在尝试使用PhoneGap创建一个应用程序。我想做一个列表查看很多新闻。我在尝试在列表中创建新数据时遇到了这个问题。目前，当我在HTML中使用在线示例中提供的标记时，效果很好。然后我尝试使用jQuery插入标记，但它们不能正常工作

下面是一个屏幕截图，向您展示了问题所在：

前两段数据只是普通的HTML，最后一段数据是用jQuery插入的。我插入了相同的代码，因此可能会有角度和jQuery冲突，这就是问题所在

相关HTML：

<ons-list style='margin: -1px 0' id="data">

 <ons-list-item modifier='chevron' class='item' ng-click='doSomething()'> <ons-row>

<ons-col width='60px'> </ons-col> <ons-col> <header> <span class='item-title'>Rorem Ipsum</span> <span class='item-label'>5h</span> </header> <p class='item-desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </ons-col> </ons-row> </ons-list-item>

 <ons-list-item modifier='chevron' class='item' ng-click='doSomething()'> <ons-row> <ons-col width='60px'> </ons-col> <ons-col> <header> <span class='item-title'>Rorem Ipsum</span> <span class='item-label'>5h</span> </header> <p class='item-desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </ons-col> </ons-row> </ons-list-item>

</ons-list> </ons-page> </ons-navigator> </ons-template>

第5h时的同侧眼

第5h时的同侧眼

JQuery：

$(function() {
$("#data").append("<ons-list-item modifier='chevron' class='item' ng-click='doSomething()'> <ons-row> <ons-col width='60px'> </ons-col> <ons-col> <header> <span class='item-title'>Rorem Ipsum</span> <span class='item-label'>5h</span> </header> <p class='item-desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </ons-col> </ons-row> </ons-list-item>");
});

$（函数（）{
美元（“#数据”）。附加（“Rorem Ipsum 5h
Lorem Ipsum door sit amet，Concertetur adipising elit，sed do eiusmod temporal incidedut ut labour and dolore magna aliqua.
”；
});

我看不到任何id为“data”的html。您是否尝试过在jQuery中点击一个断点并在控制台中键入$（“#data”）以验证它是否由页面中的元素填充？是的，很抱歉，它不在提供的html中，让我来修复它。@JDTLH9

您可能应该放弃jQuery，使用angular将模型绑定到DOM。查看内置的ng模型和ng repeat指令。有什么原因不能这样做，而不是在jQuery中使用document.ready？执行ons.compile（元素），它应该可以工作。您需要编译动态添加的所有HTML。