Input OnClick is not recognized

Question

I have this method that is recursively called.

This method creates a li that ll be used on Iscroll plugin.

My problem is:

The input button does not works. On his CSS I set cursor:pointer to check if the input is recognized, and it is. But I can click it several times that does nothing.

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;
},

The problem is not in the Detail() function bacause I can't enter in that function because the click is not recognized

UPDATE

I found that the input button stopped working after I add these to the IScroll initialization

click: true,
tap: true,

I really need those arguments in the IScroll to do other fucntions.

IScroll initialization:

initScroll: function(){
        var wrapper = document.getElementById('id5');
        myScroll = new IScroll(wrapper, {
//          click: true,
//          tap: true,
            scrollX : false,
            scrollY : true,
            scrollbars : false,
            interactiveScrollbars : true,
            mouseWheel : false,
            hScrollbar : false,
            vScrollbar : true,
            useTransition : false,
            snap : 'li',

            indicators : {
                el : '#scroller',
                fade : false,
                ignoreBoundaries : false,
                interactive : false,
                listenX : false,
                listenY : true,
                resize : false,
                shrink : false,
                speedRatioX : 0,
                speedRatioY : 0,
                checkDOMChanges: true,
            },
        });

Answer 1

Just found the solution:

There's a bug on IScroll that if the parameter click is enable then all the form elements, such as the submit button do not work with iScroll.

So, I did this:

myScroll = new IScroll(wrapper, {
            click: false,
            scrollX : false,
            scrollY : true,
            scrollbars : false,
            interactiveScrollbars : true,
            mouseWheel : false,
            hScrollbar : false,
            vScrollbar : true,
            useTransition : false,
            snap : 'li',
            preventDefaultException: {tagName:/.*/},

            indicators : {
                el : '#scroller',
                fade : false,
                ignoreBoundaries : false,
                interactive : false,
                listenX : false,
                listenY : true,
                resize : false,
                shrink : false,
                speedRatioX : 0,
                speedRatioY : 0,
                checkDOMChanges: true,
            },
        });

Notice that the parameter clickis now as false and i add the preventDefaultException: {tagName:/.*/},

I found this here

Answer 2

You need to do something like below :

createList: function(p_id)
{

    var lis = new lisClass();

      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;
},

You see i have aded var lis = new lisClass();

Answer 3

Instead of trying to add the click handler inline, you can save the p_id as a data-attribute on the input and then setup a click handler using event delegation. With delegation you can setup a handler on elements that will be created dynamically later.

When creating the listitem, put the p_id in a data-attribute of the input e.g. data-pid:

<input type="button" class="button_add" data-pid="' + p_id + '" value="+" />

Then add a click handler that delegates to the .button_add class. In that handler you can retrieve the p_id from the data-attribute:

$(document).on("click", ".button_add", function(e){
    var p_id = $(this).data("pid");
    alert(p_id);
    //call detail function and pass in the p_id
});

DEMO