onClick does not work on ipad

Navigation
2

I'm developing the application on windows, but then through the phonegap I'll pass it to an ios application, which uses the IScroll plugin to scroll through my list.

Problem:

In every li I have a div that has the event onClick , so that when this li is clicked I call a function. And this works great in google chrome which is where I'm testing. But when I move to the ipad, this event is completely scorned

I've been looking for solutions to this problem, but all the changes I've made (adding 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:

  • This function is called recursively
  • class listItem is only for identification, that is, it does not have CSS

    • CSS 

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

    UPDATE

    I'm sorry, I should not have been explicit enough. The onClick that is failing me is the first of all, the class alinhar1 . What makes me the most confusion is that in another project class I also have a onClick and this works me perfectly:

    JavaScript (which 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>';
    },
        
    asked by anonymous 11.06.2015 / 16:07

    2 answers

    1

    I have solved the problem. The problem was because the IScroll plugin was blocking me from clicks and taps from li 's that are present there.

    I added these two attributes to the method that initialized Iscroll and started working: 

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

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

        
    11.06.2015 / 17:08
    0

    Try using the tap event instead of the click. 

    $('.button_add').bind('tap',function() {  alert('Deu certo!'); });
        
    11.06.2015 / 16:16
    android-support-v7-appcompat Do not generate .jar Full customization of the Youtube player