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代码onload页面时，这段代码无效

<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

如果您的元素由发布方法加载，则可以尝试使用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>

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

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

2 个答案: