Question

here is my code

var addproduct = {
    init:function(){
        var footer = $("<div class='footer'></div>");
        var confirmButton = $("<button class='dbtn'>confirm</button>").on('click',this.confirm);
        var cancelButton = $("<button class='dbtn'>cancel</button>").on('click',this.cancel);
        d.append(footer.append(confirmButton,cancelButton));

        $('body').append(d)
    },

    getData:function(){
        var data={};
        d.find('#basic_info :input').each(function(){
            data[$(this).attr('name')] = $(this).val()
        });
        console.log(data);
        return data;
    },

    confirm:function(e){

        console.log(e.data);
    },

    cancel:function(){
        alert(2);
    }

}

when i click the confirm button i want to submit the form in ‘d’,so i want to use ‘getData’ function to get all the form data,

here is what i did

var confirmButton = $("<button class='dbtn'>confirm</button>").on('click',this.getData,this.confirm);

//output: function()

so i guess the data pass to the handler can not be a function right???

and then i change the confirm function like this

confirm:function(){

     var data = this.getData()
     console.log(data);
    },

 this will not work too , because the 'this' keyword is not the addproduct object,but the confirm button '<button>confirm</button>';

so how can i pass the getData function’s return data to confirm function?????

and why the ‘this’ isn’t the addproduct object ???

Answer 1

Try

var confirmButton = $("<button class='dbtn'>confirm</button>")
                     .on('click',this.getData(),this.confirm);

getData returns the data object you want to pass to the event handler so you have to actually call the function. Then you should be able to see the data here

confirm:function(e){

    console.log(e.data);
},