I have a div and I'm loading content into it using jQuery:
Code:
$(document).ready(function() {
$('#json_comments').load('json_comments_content.php', function() {
$.getScript("js/comments.js")});
....
....
....
I want to run the code from js/comments.js after the content is loaded into the div.
The json_comments_content.php page looks like this:
HTML Code:
<div class="items general-item-list">
<div class="item">
<div class="item-head">
<div class="item-details">
<img class="item-pic" data-field="pic_url" src="">
<a href="" class="item-name primary-link" data-field="username"></a>
<span class="item-label" data-field="datetime" data-value="" data-pk=""></span>
</div>
</div>
<div class="item-body"><a href="#" id="comment" class="can_possibly_edit" data-type="textarea" data-field="comment" data-pk="" data-value="" data-placement="right" data-original-title="Enter a comment."></a></div>
</div>
</div>
<a href="#" class="items-load">Load More...</a>
<script type="text/javascript">
$(document).ready(function() {
$('.comments_data').loadmore({
source: 'json_comments.php',
step: 15,
userid: '<?php echo $user->data()->id; ?>'
});
//on load, disabled the comments editable info on page load so it looks better.
$('#json_comments a').attr("data-disabled", "true");
$.fn.editable.defaults.mode = 'inline';
});
</script>
Whats is happening is: the .loadmore plugin will query the database and display more results when Load More... is clicked.
Once the items load completely, I need to have this script attached:
Code:
$('.edit_me').editable({
emptytext: ".....",
url: "ajax_xeditable_update.php?table=comments",
});
If I place it in either the main page or the loaded page, it never is called. The .edit_me class is selectively added to certain items that are gotten from the database when items are loaded. This is done in the loadmore.js script.
Using the .getScript method doesn't make it work either.
Any ideas?