I am trying to create an app using PhoneGap. I want to make a list view of lots of news. I came across this problem when trying to making a new piece of data in the list. Currently when I use the tags provided in an online example in my HTML, it works fine. I then try to insert the tags using jQuery, and they don't work properly.
Here is a screenshot showing you what's going wrong: http://cl.ly/image/1k063m2y3V3B
The first two pieces of data are just normal HTML and then the last piece of data was inserted with jQuery. I am inserting the same code so it might be Angular and jQuery clashing that's the problem.
Relevant 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>
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>");
});