Question

I am developing an HTML5 application for a client for their internal use on the iPad platform. Everything has been going very well implementing various JQUERY solutions for a variety of tasks, but this one just doesn’t seem to make sense.

They have a list of items on a page, contained in an un-ordered list, which they would like their users to be able to drag and drop to shuffle the order, or click a delete button to remove one of the items.

I have it sorting just fine and it deletes just fine, at first. But then, when testing on the iPad, after I have clicked on the delete button, it runs through a confirm and performs the operation I have defined. But then, the next time I click on the screen in triggers the click event again, even if I am far away from the div which is defined to trigger this event.

Here is an HTML snippet of one of the

tags which sorts and deletes:

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

Here are the various jquery includes and the internal javascript to accomplish these tasks:

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

Answer 1

This seems to be somewhat of a common issue faced by many people. The probable reason is that on the iPad, you have two events getting called tap and click.

The solution would be to unbind your events before handling the actual event like

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

Hope this works.