Run jQuery on change and page load

Question

I want to run jQuery when select element change and when page load. In this web page I have two table which user can move row from tbl1 to table2 using jQuery and every thing work fine but when I run the jQuery when select change and page load I can not move row from one table to another this is the code which I wish to run when page load and select is change

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

        $('#Groups').change(function () {

// show that something is loading
//$('#result').html('<img src="images/ajax_loader_red_128.gif"/>')

            var jtarih = $('#Groups').val();

//  alert(jtarih);
//var jadsoyad=$('#adsoyad').val();


            /*
             * 'post_receiver.php' - where you will pass the form data
             * $(this).serialize() - to easily read form data
             * function(data){... - data contains the response from post_receiver.php
             */

            $.post('groupuser.php', {id: jtarih, tarih: jtarih}, function (data) {
                $('#dive').html(data);

// show the response
//    $('#dive').replaceWith(html(data));

            }).fail(function (data) {

// just in case posting your form failed
                $('#dive').html(data);

            });


// to prevent refreshing the whole page page
            return false;

        });
        $('#Groups').trigger('change');
    });
</script>

This is the JavaScript code which move row from one table to another in this code every thing go fine but when I run the above JavaScript code onload page this code not working

<script>
    $(document).ready(function () {
        $("#product-table2 img.move-row").live("click", function () {
            var tr = $(this).closest("tr").remove().clone();
            tr.find("img.move-row")
                    .attr("src", "images/arrow.png")
                    .attr("alt", "Move");
            $("#product-table tbody").append(tr);
        });

        $("#product-table img.move-row").live("click", function () {
            var tr = $(this).closest("tr").remove().clone();
            tr.find("img.move-row")
                    .attr("src", "images/leftarrow.png")
                    .attr("alt", "Remove");
            $("#product-table2  tbody").append(tr);
        });
    });

</script>

Answer 1

you are adding that code in the onload function, which means that by completing the page load it will stop working. You should leave the function off, and call it also inside the onload.

<script>
   $(document).ready(function (){
   mover_fila();
   });

   mover_fila();

   function mover_fila(){
       $('#Groups').change(function () {
           var jtarih = $('#Groups').val();

           $.post('groupuser.php', {id: jtarih, tarih: jtarih}, function (data) {
           $('#dive').html(data);

       }).fail(function (data) {
       $('#dive').html(data);
   });

   return false;

   });
   $('#Groups').trigger('change');
}
</script>

This is the second code, check its functionality with your html. In theory it should work if you remove your code from the onload function.

<script>
   $(document).ready(function (){
      mover_otra_fila();
   });

   mover_otra_fila();

   function mover_otra_fila(){
       $("#product-table2 img.move-row").live("click", function () {
           var tr = $(this).closest("tr").remove().clone();
           tr.find("img.move-row")
                   .attr("src", "images/arrow.png")
                   .attr("alt", "Move");
           $("#product-table tbody").append(tr);
       });

       $("#product-table img.move-row").live("click", function () {
           var tr = $(this).closest("tr").remove().clone();
           tr.find("img.move-row")
                   .attr("src", "images/leftarrow.png")
                   .attr("alt", "Remove");
           $("#product-table2  tbody").append(tr);
       });
   }
</script>

Good luck, I hope it's useful.

Answer 2

If your element is loaded by Post method you can try to use document.on(). Because your element is not in DOM on load page

$(document).ready(function () {
    $(document).on("click", "#product-table2 img.move-row", function () {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
                .attr("src", "images/arrow.png")
                .attr("alt", "Move");
        $("#product-table tbody").append(tr);
    });

    $(document).on("click", "#product-table img.move-row", function () {
        var tr = $(this).closest("tr").remove().clone();
        tr.find("img.move-row")
                .attr("src", "images/leftarrow.png")
                .attr("alt", "Remove");
        $("#product-table2  tbody").append(tr);
    });
});