可排序li标签中的模式按钮在移动设备上不可点击

问题描述 投票：0回答：1

我正在制作具有可排序列表的php网站的移动版本。在li标签内有三个div，第一个和第二个是可点击的，应打开一个模式窗口。

<ul id='sortable'>
//...multiple li tags
<li class='ui-state-default row'>
    <div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-edit' onclick='modificaModale()'>
        <i class='fas fa-edit iconeScheda'></i>
    </div>
    <div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-elimina-esercizio' onclick='eliminaModale()'>
        <i class='fas fa-trash-alt iconeScheda'></i>
    </div>
    <div class='col-sm-10 col-xs-10'>
        <b>Name of exercise</b>
    </div>
</li>
//...
</ul>

在桌面浏览器上，一切正常，但在移动设备上，两个div不可单击，并且模式不会打开。如果我删除了可排序内容，那么模式也会在移动设备上打开。我的头部标签看起来像这样：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="jquery.ui.touch-punch.min.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">

    <script>

        function modificaModale(id) {
            //do stuff
        }

        function eliminaModale() {
            //do stuff
        }

        $(function () {
            $("#sortable").sortable({
                axis: 'y',
                type: 'li',
                update: function (event, ui) {
                    var data = $(this).sortable('serialize');
                    $.ajax({
                        data: data,
                        type: 'POST',
                        url: 'some url'
                    });
                }
            });
        });

    </script>
</head>

以及那些样式

#sortable { list-style-type: none; margin: 0; padding: 0; cursor: grab;}
#sortable li span { position: absolute; margin-left: -1.3em; }

.iconeScheda{
    cursor:pointer;
    font-size: 20px;
    padding: 5px;
    font-weight: 100;
}

我的一个模态是这样的（另一个几乎相同）

<div class="modal fade" id="confirm-elimina-esercizio" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true" style="background: none">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="eliminaScheda.php" method="post">
                <input type="text" name="id" id="idElimina" style="display:none"/>
                <div class="modal-header">
                    <h3>Elimina</h3>
                </div>
                <div class="modal-body">
                    Sei sicuro di voler eliminare <span id="esercizioModale"></span>?
                </div>
                <div class="modal-footer">
                    <input type="submit" value="Conferma"/>
                    <input type="button" data-dismiss="modal" value="Annulla"/>
                </div>
            </form>
        </div>
    </div>
</div>

没有“可排序” ID，模式将正常打开。以下是网上图片：desktop version here和移动版本：mobile version here

提前感谢

php jquery mobile html-lists jquery-ui-sortable
1个回答
0
投票

我在Codepen中检查代码时codepen.io/nickjackson139/pen/PoorWOG在移动视图中为打开模型。

function modificaModale(id) {
  //do stuff
}

function eliminaModale() {
  //do stuff
}

$(function() {
  $("#sortable").sortable({
    axis: 'y',
    type: 'li',
    update: function(event, ui) {
      var data = $(this).sortable('serialize');
      $.ajax({
        data: data,
        type: 'POST',
        url: 'some url'
      });
    }
  });
});
#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  cursor: grab;
}

#sortable li span {
  position: absolute;
  margin-left: -1.3em;
}

.iconeScheda {
  cursor: pointer;
  font-size: 20px;
  padding: 5px;
  font-weight: 100;
}
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<ul id='sortable'>

  <li class='ui-state-default row'>
    <div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-edit' onclick='modificaModale()'>
      <i class='fas fa-edit iconeScheda'></i>
    </div>
    <div class='col-sm-1 col-xs-2' data-toggle='modal' data-target='#confirm-elimina-esercizio' onclick='eliminaModale()'>
      <i class='fas fa-trash-alt iconeScheda'></i>
    </div>
    <div class='col-sm-10 col-xs-10'>
      <b>Name of exercise</b>
    </div>
  </li>
</ul>

<div class="modal fade" id="confirm-elimina-esercizio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="background: none">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="eliminaScheda.php" method="post">
        <input type="text" name="id" id="idElimina" style="display:none" />
        <div class="modal-header">
          <h3>Elimina</h3>
        </div>
        <div class="modal-body">
          Sei sicuro di voler eliminare <span id="esercizioModale"></span>?
        </div>
        <div class="modal-footer">
          <input type="submit" value="Conferma" />
          <input type="button" data-dismiss="modal" value="Annulla" />
        </div>
      </form>
    </div>
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.