onClick does not work on ipad

Asked

Viewed 446 times

2

I am developing the application in windows, but then through phonegap I will pass it to an Ios application, which uses the Iscroll plugin to scroll through my list.

Problem:

In each li have a div that has the event onClick, so that when this li for clickada I call a function. And this works very well on google Chrome which is where I’m testing. But when I step into the ipad, this event is completely scorned

I have been looking for solutions to this problem, but all the changes I have made (add the CSS cursor:pointer, for example), have not helped me to overcome it.

Javascript

    createList: function(p_id)
    {

          var lv_linhaDoc = '<li id="lis_' + p_id + '" class="listItem">' +
          '<div class = "alinhar1" onClick="lis.Click(' + p_id + ', false)">' + 
                '<div class="ui-grid-a" style="font-size: large">' +
                  '<div class="ui-block-a"><p class="header" style="font-size: medium"><strong>' + 4 + '</strong></p></div>' +
                  '<div class="ui-block-a"><p class="line label"><strong>Data Criação</strong></p></div>' +
                  '<div class="ui-block-b"><p class="line value" style="text-align: right">' + '13/2/14' + '</p></div>' +
                  '<div class="ui-block-a"><p class="line label total"><strong>  Valor</strong></p></div>' +
                  '<div class="ui-block-b"><p class="line total" style="text-align: right">' + 13 + ' ' + 15 + '</p></div>' +
              '</div></div>' +
                  ' <input type="button" class=" button_add" onClick="lis.Detail(' + p_id + ')" />' +
          '</li>';

        return lv_linhaDoc;
    },

P.S:

  1. This function above is called recursively
  2. the class listItem is only identification, IE, has no CSS

CSS

.alinhar1 {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    width: 90%;
    float: left;
    cursor: pointer;
}

UPDATE

I’m so sorry, I must not have been explicit enough. The onClick that is failing me is the first of all, the class alinhar1. What makes me more confused is that in another class of the project I also have a onClick and that works for me perfectly:

Javascript (that works)

linhadeDetalhes: function (p_item) {
        detail.items += '<li><div onClick="detail.matInfo(' + "'"+ p_item.info + "'" + ')"><p><strong>' + p_item.info + '</strong></p>' +
                            '<p>' + p_item.quantidade + ' ' + p_item.unidades + '</p></div>' +
                            '<p class="ui-li-aside ui-li-aside-value"><strong>' + p_item.preco + ' ' + p_item.preco2 +' </strong></p></li>';
    },
javascript jquery css ios jquery-mobile
  • 1

    For mobile devices some browsers understand the onClick, others understand the tap or the touchstart. For further information visit: http://stackoverflow.com/questions/13358292/capture-tap-event-with-pure-javascript

  • @Diegosouza I updated the question

  • All right, but are you making a mistake? What does the Inspect Element show ?

  • 1

    @Diegosouza makes no mistake. It works perfectly, but only here in google Chrome. When I step to the ipad, the first onClick crashing

  • You are using Safari ?

  • @Diegosouza Nop. This is an ipad app.

  • Let’s go continue this discussion in chat.

  • 1

    @Diegosouza discovered the error. : P I thought: "Why is the other class of the project working and not here?" " This one has the Iscroll plugin and the other one doesn’t." The problem is with Iscroll. I found the solution here: http://stackoverflow.com/questions/17768037/enable-click-events-in-iscroll-on-mobile-browser

Show 3 more comments

2 answers

1


I already solved the problem. The problem was because the Iscroll plugin was blocking me clicks and taps of li'are present there.

I added these two attributes to the method that initializes ISCROLL and starts working:

    myScroll = new IScroll(wrapper, {
            click: true,
            tap: true,
            ...

I found the solution here: Enable click Events in iScroll on mobile browser

0

Try using the tap event instead of the click.

$('.button_add').bind('tap',function() {  alert('Deu certo!'); });

  • I updated the question

Browser other questions tagged javascript jquery css ios jquery-mobile

You are not signed in. Login or sign up in order to post.