jQuery not reloading a div by class, id, or class AND id

Question

When the user submits the form, the information and form works but the div box is not reloading. I've used .atten, #tag, and .atten#tag. it's simply not grabbing the div box.

<div class = 'atten' id = 'tag'>
formm is in here
</div>

echo "<script>
$(document).ready(function(){

    $('.atten').on('click', function(){
        var tag = $(this).attr('id');
        $('.atten').submit(false);
        $.post('atten_form.php',
                $('.atten#' + tag).serialize(),             
            function (data, status){
                $('#div' + tag).load(' #div' + tag);
                })
        });
});
</script>";

Answer 1

load function is for Load data from the server and place the returned HTML into the matched element for more detail read documentation .

If you want to load data from a element that is on current page then simply use .html() function.

$('div#' + tag).html($('div#' + tag).html());

Here is example:

  $('.atten').on('click', function() { var tag = $(this).attr('id'); $('div#' + tag).html($('div#' + tag).html()+ " content loaded"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class='atten' id='tag'> formm is in here </div> 

Answer 2

This was the solution:

    "<script>
$(document).ready(function(){

$('body').on('click', '.atten', function(el){ //changed from form id .atten to body.
    var tag = $(this).attr('id');
    $('.atten').submit(false);
    $.post('atten_form.php',
            $('.atten#' + tag).serialize(),             
        function (data, status){
            $('#divWrap' + tag).load(' #atten' + tag); //added an additional div around the div with id atten$tag.
            });
    })
 })

</script>";