I have a problem with my web application which is designed for iPad. I use jQuery and jQuery UI for dragging elements on the screen. Because on iPad, the element can not be dragged by default, I added this library:

/

Including it, I can drag and drop elements on iPad, but also a problem occurs. I have on the draggable element also a div are with an image, which should be clickable.

So I integrate these lines:

$(document).ready(function() {
    $(".note").draggable();
    $('.closebutton').click(function() {
        alert("test");
    });
});

​ The problem is, including the drag-library, the alert message test pops up twice or the screen is frozen.

I created a full working demo here:

/

On normal desktop browsers, like Firefox 4 Beta and Safari, it works, only one test message appears by clicking with the mouse on the x - delete image. On iPad, I get the message twice or the screen froze.

Does anyone can help me? Thank you a lot in advance & Best Regards.

I have a problem with my web application which is designed for iPad. I use jQuery and jQuery UI for dragging elements on the screen. Because on iPad, the element can not be dragged by default, I added this library:

http://code.google./p/jquery-ui-for-ipad-and-iphone/

Including it, I can drag and drop elements on iPad, but also a problem occurs. I have on the draggable element also a div are with an image, which should be clickable.

So I integrate these lines:

$(document).ready(function() {
    $(".note").draggable();
    $('.closebutton').click(function() {
        alert("test");
    });
});

​ The problem is, including the drag-library, the alert message test pops up twice or the screen is frozen.

I created a full working demo here:

http://jsbin./oliwo/2/

On normal desktop browsers, like Firefox 4 Beta and Safari, it works, only one test message appears by clicking with the mouse on the x - delete image. On iPad, I get the message twice or the screen froze.

Does anyone can help me? Thank you a lot in advance & Best Regards.

• javascript
• jquery
• jquery-ui

5 Answers 5

This is not really a response, as i don't known why you have it twice. But you can try a workaround if you're sure your click event is the only click event behavior that should be attached to this button; Make an unbind() just before you're bind, this will remove any previous click binding (so if this is run several times, you'll get only one event):

$('.closebutton').unbind().click(function() { ...

or better:

$('.closebutton').unbind('click').click(function() { ...

I've found that events get fired twice when showing an alert box on a click. I've managed to overe this problem by using a setTimeout to show the alert box...

$("#myButton").unbind("click").click(function () {
   // Have to use a setTimeout else on iPhone the alert may appear twice in certain scenarios
   setTimeout(function () {  alert('The message'); }, 300);
   return false;  // Return false to prevent href being followed
});

I do not know why, but if I do not use alert messages, it will work. I create new elements and then it is only called once, on iPad and Desktop Safari.

I'm seeing this issue only on iPad, perhaps some version of webkit related. The unbind worked for me, and I also read this only exists if jquery code is in the body html tag, if its in head it is not an issue.

just simply avoid the propagation of the click

$("tr").live('click',function() {

        ...

        $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
    });