javascript - jquery - div onclick - not working in iPhone - Stack Overflow

admin管理员组

文章数量:1277875

i tried different ways.
I need onclick for a div with jquery in my mobile site. On clicking on the div it will send an ajax call.

$(document).ready(function() {
... ...... 

$('body').on('click','.selectableCard', function() {

    $.ajax({
                url : URL}).done(
                function(data) {    .....    ....   });
        });
...
....
        });

This is working fine in desktop browsers and in android emulator. But not working in iPode4.

Div

<div class="resultsMainContainer selectableCard  ">

style

.selectableCard {
    pointer-events: auto !important;
}
.resultsMainContainer {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    box-shadow: 3px 3px 5px 1px #CCCCCC;
    display: inline-block;
    margin-bottom: 15px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    width: 98%;
}

I tried as:

$('.selectableCard').click(
        function(){....

But it's not working in desktop itself. !

Any idea would be appreciated :)

Here is an updated jsFiddle: /

Will work fine in desktop , but not working in iPod

i tried different ways.
I need onclick for a div with jquery in my mobile site. On clicking on the div it will send an ajax call.

$(document).ready(function() {
... ...... 

$('body').on('click','.selectableCard', function() {

    $.ajax({
                url : URL}).done(
                function(data) {    .....    ....   });
        });
...
....
        });

This is working fine in desktop browsers and in android emulator. But not working in iPode4.

Div

<div class="resultsMainContainer selectableCard  ">

style

.selectableCard {
    pointer-events: auto !important;
}
.resultsMainContainer {
    background-color: #FFFFFF;
    border: 1px solid #D6D6D6;
    box-shadow: 3px 3px 5px 1px #CCCCCC;
    display: inline-block;
    margin-bottom: 15px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    width: 98%;
}

I tried as:

$('.selectableCard').click(
        function(){....

But it's not working in desktop itself. !

Any idea would be appreciated :)

Here is an updated jsFiddle: http://jsfiddle/smilyface/y7DX5/1/

Will work fine in desktop , but not working in iPod

• javascript
• jquery
• iphone
• html
• onclick

Share Improve this question Follow edited Nov 14, 2013 at 14:07 smilyface asked Nov 12, 2013 at 12:40 smilyfacesmilyface 5,5211111 gold badges4444 silver badges6060 bronze badges 17

• not sure that the $(document).ready( works on mobiles – Liam Sorsby Commented Nov 12, 2013 at 12:42
• document ready works fine in mobile. Because i used it in another pages in the same application. – smilyface Commented Nov 12, 2013 at 12:43
• should you have $('body') in quotes? shouldn't it be $(body) – Liam Sorsby Commented Nov 12, 2013 at 12:44
• Liam, it has a single quote. 'body' – smilyface Commented Nov 12, 2013 at 12:46
• ah my mistake just looked it up my self. What version of jquery are you using and are you using jquery mobile for your mobile sites or just jquery? – Liam Sorsby Commented Nov 12, 2013 at 12:47

 |  Show 12 more ments

2 Answers 2

Sorted by: Reset to default 11

On iphone you must use touchevent for exemple:

$('.selectableCard').on('click touchstart',function(){
//your code
});

Got it working.

I just put the entire onclick function (onclick selectableCard) inside the ajax. So that it will run each time when the ajax loads. Thus it can get the class/div specified inside the jQuery.

$.ajax({
            url : URL
            }).done(
            function(data) {

                container.html(data); //innerHTML part
                $('.selectableCard').click(function(){..call div came through above innerHTML..});
});

本文标签： javascriptjquerydiv onclicknot working in iPhoneStack Overflow