Question

背景

页面B 由XMLHttpRequest在 Page A 中动态加载。 页面B 包含刷卡重新加载页面B 本身的名称列表。

问题：

加载 Page A 时，滑动工作正常，但当 Page B 重新加载时，滑动功能无法正常工作。

尝试使用 Page B 中的swipe.js，但似乎没有任何效果。

如果有人能指出问题，那将会很有帮助......谢谢

代码

第A页：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<script>

var d = '<?php echo $result["d_delayed"]; ?>';
var q = '<?php echo $result["d_queued"]; ?>';
if(typeof(EventSource) !== "undefined") {
    var source = new EventSource("detect_change");
    source.onmessage = function(event) {
        var obj = JSON.parse(event.data);

        // Reload on Queue Update
        document.getElementById("title_change").innerHTML = obj.name;

        if(d != obj.delay || q != obj.queue){
            loadDoc("");
        }
    };
}
</script>
<div>
<p id="demo"></p>
</div>
<script>
//Load through XMLHttpRequest
function loadDoc(search) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo").innerHTML = this.responseText;
        }
      };

      xhttp.open("GET", "swipe_page.php", true);
      xhttp.send();
    }
    loadDoc(search);
</script>

</body>
</html>

Page B（swipe_page.php）

<ul class="list-group list-group-flush patient-list swipe-list bottom-pad-ul">
    <li class="list-group-item">
        <div class="patient-list__info swipe swipe-left-right" linkRight="#link" linkLeft="#link">
            <a data-toggle="modal" class="bg-hov" data-target="#myModal"><span class="span-left-arrow"><i class="fa fa-chevron-left float-left" aria-hidden="true"></i></span></a>
            <a href="#" class="patient-list__link"><span class="patient-list__patient-name">User Name</span></a>
            <a data-toggle="modal" data-target="#myModal"><span class="badge badge-light badge-pill patient-list__patient-badge patient-list__patient-badge--first">number</span></a>
        </div>
        <div class="patient-list__info patient-list__info--mirror" style="">
            <i class="fa fa-reply" aria-hidden="true"></i>&nbsp&nbspUndo
        </div>
    </li>
</ul>

滑动脚本

     var s1 = Swiped.init({

        query: 'li>.swipe-right',
        list: false,
        left: 5,
        right: 0
        });
        var s2 = Swiped.init({
            query: 'li>.swipe-left-right',
            list: false,
            left: 5,
            right: 5
        });
        jQuery(document).on('touchstart', 'li>.swipe-right', function() {
            s1.open;
        });
        jQuery(document).on('touchstart', 'li>.swipe-left-right', function() {
            s2.open;

    });

    var onOpenfunction = function() {
        var clickUndo = false;
        var dir = this.dir;
        var offset, invert_offser;
        //jQuery(this.elem).css('transform', 'translate3d(0px, 0px, 0px)');
        if (dir === 1) {
            offset = '110%';
            invert_offser = '-110%';
        } else {
            offset = '-110%';
            invert_offser = '110%';
        }
        jQuery(this.elem).animate({left: offset});

        console.log(offset);
        jQuery('.patient-list__info--mirror',jQuery(this.elem).parent()).css('left',invert_offser).animate({left: 0});

        jQuery('.patient-list__info--mirror',jQuery(this.elem).parent()).click(function () {

            jQuery('.patient-list__info',jQuery(this).parent()).not('.patient-list__info--mirror').animate({left: 0});
            jQuery(this).animate({left: invert_offser});
            clickUndo = true;
            jQuery(this).off();
        });
        var currentElem = this.elem;
        var parentElem = jQuery(this.elem).parent();
        setTimeout(function() {
            if(!clickUndo) {
                jQuery(parentElem).hide();
                if(dir === 1){
                    console.log(jQuery(currentElem).attr('linkRight'));
                    var right_swipe = jQuery(currentElem).attr('linkRight');
                     $.ajax({url: right_swipe, success: function(result){

            }});
                } else {
                    console.log(jQuery(currentElem).attr('linkLeft'));
                    var left_swipe = jQuery(currentElem).attr('linkLeft');
                     $.ajax({url: left_swipe, success: function(result){

            }});
                }
            }
        }, 5000);
    };

    Swiped.init({
        query: 'ul.swipe-list>li>.swipe-left-right',
        onOpen: onOpenfunction
    });
    Swiped.init({
        query: 'ul.swipe-list>li>.swipe-right',
        onOpen: onOpenfunction
    });

Answer 1

最后，我找出了潜在的问题。由于每次都使用Ajax加载页面B，因此不会加载滑动脚本。

每次加载页面B时，您只需加载滑动脚本。

希望这有助于为某人节省时间!!!

通过AJAX动态添加时滑动不起作用

1 个答案: