Событие JQuery Click повторяется при следующем нажатии в Mobile Safari - PullRequest
Новая
       0

Событие JQuery Click повторяется при следующем нажатии в Mobile Safari

1 голос
/ 15 февраля 2012

Я разрабатываю приложение HTML5 для клиента для его внутреннего использования на платформе iPad.Все идет очень хорошо, внедряя различные решения JQUERY для различных задач, но это, похоже, не имеет смысла.

У них есть список элементов на странице, содержащийся в неупорядоченном списке, который они хотели бы, чтобы их пользователи могли перетаскивать, чтобы перетасовать заказ, или нажать кнопку удаления, чтобы удалить один из них.

У меня все отлично сортируется и сначала просто удаляется.Но затем при тестировании на iPad, после того, как я нажал на кнопку удаления, он проходит через подтверждение и выполняет заданную мной операцию.Но затем, в следующий раз, когда я нажимаю на экран, снова запускается событие click, даже если я далеко от div, который определен для запуска этого события.

Вот фрагмент HTML одного из

теги, которые сортируют и удаляют: 
<li id="12345">
<div class="clearfix">
    <div class="product-image">
        <img src="../../img/presentation.png" width="200" height="140" />
    </div>
    <div class="product-info">
        <div class="details">
            <h3><a class="name" href="#">Comparison</a></h3>
            <ul>
                <li><strong>Competitor: </strong>[Brand]</li>
                <li><strong>Us: </strong>[Brand]</li>
            </ul>                                       
        </div>
        <div class="brand">
            <div class="remove" style="width: 30px; height: 30px;">(&times;)</div>
            <div class="edit-bar"><img src="../../img/presentations-edit-bars.png" /></div>
            <p class="logo">[Distributor]</p>
        </div>
    </div>          
</div>

Вот несколько различных jquery-пакетов и внутреннего javascript для выполнения этих задач: 

<script src="../../js/libs/jquery.min.js" type="text/javascript"></script>
<script src="../../js/libs/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../js/libs/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    $(function () {
        $(".remove").click(function () {
            var e = $(this);

            this.style.backgroundColor = "#FFAAAA";

            var p = this.parentNode;
            var count = 1;
            while (p.tagName != 'LI') {
                p = p.parentNode;
                count++;
            }

            var cont = confirm("Are you sure you would like to delete this item?");

            if (cont) {
                var deletedItems = document.getElementById('deletedItems');
                if (deletedItems.value != "") {
                    deletedItems.value += ",";
                }
                deletedItems.value += p.id;
                p.style.display = 'none';
            }

            this.style.backgroundColor = "transparent";
        });
        $("#sortable").sortable({
            stop: function (event, ui) {
                var newOrder = "";
                for (i = 0; i < $("#sortable li").size(); i++) {
                    newOrder += $("#sortable li").get(i).id;
                    if (i < $("#sortable li").size() - 1) {
                        newOrder += ",";
                    }
                }
                document.getElementById('currentOrder').value = newOrder;
            }
        });
        $("#sortable").disableSelection();
    });
</script>

1 Ответ

1 голос
/ 15 февраля 2012

Похоже, это довольно распространенная проблема, с которой сталкиваются многие люди. Вероятная причина в том, что на iPad у вас есть два события, вызываемые касанием и щелчком.

Решение состоит в том, чтобы отменить привязку ваших событий перед обработкой фактического события, такого как 

$('.remove').unbind('click touchstart').click(function() { ... }

Надеюсь, это сработает.

...