While working with a web page that uses jQuery Mobile, I utilized Ajax to load the following HTML content. The key detail is the presence of the onButton class attached to the anchor tag.
<a class="onButton ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" href="#" data-role="button" data-inline="true" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Turn On</span></span></a>
Upon loading via Ajax, I triggered a "create event" in order to implement jQuery Mobile button styles as described in the documentation.
$.ajax({
url: '/loadAllButtons',
context: $('contentBox'),
cache: false,
data: {'listOfEntities': JSON.stringify([1,2,3,4,5])},
success: function(data) {
$(this).html(data).trigger( "create" );
}
});
Although the buttons loaded successfully, when I tried to check for the presence of anchor tags with the onButton class using
console.log($('.onButton').length);An intriguing observation considering Chrome Web Developer indicates 5 instances of <a> tags with the onButton class that were loaded via Ajax.
Why is it that jQuery is not able to detect these newly loaded anchor tags (or buttons)?
To clarify my debugging process, here is what I am doing:
$.ajax({
url: '/loadAllButtons',
context: $('contentBox'),
cache: false,
data: {'listOfEntities': JSON.stringify([1,2,3,4,5])},
success: function(data) {
$(this).html(data).trigger( "create" );
}
});
console.log($('.onButton').length);
Thank you.