I have three sections in my working code:
- a PHP file,
- a jQuery code section which contains an AJAX function which requests,
- another PHP file.
The response is a HTML section which should be prepended to a DIV inside the first PHP file (from where AJAX was requested using the jQuery section in the <script> tag inside the <head> section of the PHP file.
My query is while AJAX is prepending dynamically the HTML successfully in the desired DIV element id="content", the other click events targeted with response HTML element tags are not working dynamically.
What could be the reason?
$(".update_button").click(function (){
var updateval = $("#update").val();
var cate = $("#selectcategory").val();
var up = $("#uploadvalues").val();
if (up)
{
var uploadvalues = $("#uploadvalues").val();
}
else
{
var uploadvalues = $(".preview:last").attr('id');
}
var X = $('.preview').attr('id');
if (X)
{
var Z = X + ',' + uploadvalues;
}
else
{
var Z = 0;
}
var dataString = 'update=' + updateval + '&Category=' + cate + '&uploads=' + Z;
if ($.trim(updateval).length == 0 || $("#selectcategory").val() === "")
{
if ($.trim(updateval).length == 0)
{
alert('Please Enter SOME TEXT!');
}
else if ($("#selectcategory").val() === "")
{
alert('Choose a Category from the list!');
}
}
else
{
$.ajax({
type: "POST",
url: $.base_url + "message_ajax.php",
data: dataString,
cache: false,
success: function (html)
{
$("#flash").fadeOut('slow');
$(".teacherpost").prepend(html);
$("#update").val('').focus();
$("#selectcategory").val('');
$('#preview').html('');
$('#uploadvalues').val('');
$('#photoimg').val('');
$(".decoration").hide();
}
});
}
return false;
});
HTML prepended from AJAX resposne:
<div class="post-description">
<div class="stats">
<div class="st_like_share">
<a class="Like" href="javascript:void(0)" id='like<?php echo $msg_id;?>' title='<?php echo $like_status;?>' rel='<?php echo $like_status;?>' data='<?php echo $shareKey; ?>'><i class="glyphicon glyphicon-star" style="color:#F16522;"></i><?php echo $like_count; ?></a>
<?php } else { ?>
<a class="Like" href="javascript:void(0)" id='like<?php echo $msg_id;?>' title='<?php echo $like_status;?>' rel='<?php echo $like_status;?>' data='<?php echo $shareKey; ?>'><i class="glyphicon glyphicon-star" ></i><?php echo $like_count; ?></a>
<?php } ?>
<a href="javascript:void(0)" class="stat-item remark" data-id="<?php
echo $msg_id;?>" title='Give your Remarks on it'>
<i class="fa fa-comments-o icon"></i><?php echo $remark_count; ?>
</a>
<a href="javascript:void(0)" class="stdelete stat-item" data-id="<?php echo $omsg_id;?>" rel="" title="Delete Post">
</a>
<?php }
?>
</div>
</div>
</div>
<div class="post-footer" id="post-footer-<?php echo $msg_id;?>">
<textarea name="comment" class="form-control add-comment-input" id="ctextarea<?php echo $omsg_id;?>" style="width:100%;" placeholder="Add a remark here..."></textarea>
<span class="input-group-btn">
<input type="submit" value="Remark" name="Remark" id="<?php echo $omsg_id;?>" rel="<?php echo $msg_id;?>" class="btn btn-info pull-right Remark_button">
<!--<input type="submit" id="" value="Send" class="btn btn-default go-chat pull-right ">-->
</span>
<?php if($remark_count>0) { ?>
<ul class="comments-list" id="commentload<?php echo $msg_id;?>">
<?php include('comments_load.php'); ?>
</ul>
<?php } ?>
</div>
</div>
jQuery which is not working on the AJAX responded HTML code:
/*Remark Load */
$(".stat-item.remark").on("click", function( e ) {
var post_footer_id = "#post-footer-"+$(this).data('id');
$(post_footer_id).slideToggle();
});
Dynamically this is not working, but when I refresh the page this jQuery works fine.
