在更改和页面加载上运行jQuery

Question

我想在选择元素更改和页面加载时运行jQuery。 在此网页中，我有两个表，用户可以使用jQuery将行从tbl1移至table2，并且一切正常，但是当我在选择更改和页面加载时运行jQuery时，无法将行从一个表移至另一个表，这是代码我希望在页面加载和选择更改时运行

<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>

这是JavaScript代码，该代码将行从一个表移动到另一个表中，一切正常，但是当我运行上述JavaScript代码加载页面时，此代码不起作用

<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

如果您的元素是通过Post方法加载的，则可以尝试使用document.on() 。 因为您的元素不在加载页面上的DOM中

$(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);
    });
});

Answer 2

您正在将该代码添加到onload函数中，这意味着通过完成页面加载，它将停止工作。 您应该关闭该函数，并在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>

这是第二个代码，请使用html检查其功能。 从理论上讲，如果您从onload函数中删除代码，它应该可以工作。

<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>

祝你好运，我希望它会有用。