Onclick event handler seems not called

Question

My JSON:

[{
"i_id":"1",
"i_name":"Biryani",
"i_category":"Pakistani",
"i_Uploader_Name":"Nabeel",
"i_dateofadd":"2016-01-24",
"i_rate":"0",
"image_name":"Biryani-main1.jpg",
"image_path":"images\/Biryani-main1.jpg",
"image_thumb":"thumb\/Biryani-main1.jpg"
}]

I want to give to every recipe its different id, so that I can show them anywhere:

 $('#btnsearchres').click(function(){
            $("#recipes").empty();
            var content;
            var ingredient=$('#txtsearch').val();
            //$server = 'http://localhost/XDK';     
 $.getJSON(server+"/search.php",{ingredient:ingredient},function(data){
    $.each(data, function(i,data){
    content='<ul data-role="listview" data-inset="false" data-theme="a">';
    content += '<li><a>' + data.i_category + '</a></li>';
    content += '<li><a href="#"><img src="http://localhost/xdk/'+data.image_thumb+'" style="width:200px;height:200px;"/>';
        content+='<h3>'+data.i_name+'</h3>';
    content += '<p overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">' + data.i_recipe + '</p></a></li>';
        content+='<li><input id="btn'+data.i_id+'" onclick="ViewItem('+data.i_id+','+UserId+')" type="button" value="View" style="padding-top:10px;"/></li>';
        content+='</ul><hr>';
    $(content).appendTo("#recipes");
    });
});
});

It is my ViewItemFunction. But when I press on view, it does nothing:

 function ViewItem(ItemId,UserId){
    alert("working");//not working
    var content;
    $.ajax({

                           type: "post",
                           dataType  : 'html',
                           url: $server+"/view.php",
                           data: {ItemId:ItemId,UserId:UserId},
                           success: function(result) {
                               alert(result);
                               
                                $(content).appendTo("#");
                            }
                       });
}

What's `UserId`? `[...] onclick="ViewItem('+data.i_id+','+` **UserId** `+')" type="button" [...]` I feel obligated to tell you that [using onClick is bad practice](http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) — WcPc, Mar 04 '16 at 23:54
As far as I know there are two different alternatives: `$(document).on('click', '#foo', function() { /* do stuff */ })` and `$('#foo').click(function() { /* do stuff */ })` — WcPc, Mar 05 '16 at 00:53

score 1 · Accepted Answer · edited May 23 '17 at 11:45

Add this anywhere in your $(document).ready():

$(document).on('click', '#btn', function() {
    ViewItem($(this).attr('id').substr($(this).attr('id').indexOf('-') + 1), UserId);
}

Change this:

content+='<li><input id="btn'+data.i_id+'" onclick="ViewItem('+data.i_id+','+UserId+')"

To this:

content+='<li><input id="btn-'+data.i_id+'"

Note the "-" after "btn" and the absence of the "onclick"-part.

I think the problem exists because you add the input dynamically, see here. If this does not help it might be a syntax error, your code is terribly structured and to say the truth I am too lazy to go through it all.

If you use Google Chrome you can press F12 and Click on "Console" to see if there is an error.

Onclick event handler seems not called

1 Answers1

Linked