Adding an Icon to My Edit Form

Question

I am trying to add an icon to my edit form. The Icon appears as expected but it does not react to click event.

Using free jqGrid 4.13

In the colModel:

{name:'characteristic', index:'characteristic', width:150, editable: true,
    editoptions:{rows:'3',cols:'50'}, editrules:{edithidden:true},
    formoptions:{rowpos:3, colpos:1,label:"Characteristic:",
    elmsuffix: " <img class='genericnotes' src='/QMSWebApp/Images/addnote[3].jpg'>"},
    edittype:'textarea'},

In the loadComplete:

$('.genericnotes').on("click", function(){
    var tControl = this.name;
    alert(tControl);

    //$('.miscdisplay').load("/QMSWebApp/FirstArticleControllerServlet",
    //{lifecycle:"faieditlistdisplay",
    //tControl:tControl,
    //source:0});
    //$('.miscdisplay').show("slide", { direction: "right" }, 1000);
});

Answer 1

在$('.genericnotes').on("click", function(){...});内使用loadComplete是错误的，因为此时编辑表单不存在。您应该使用例如表单编辑的beforeShowForm回调。 free jqGrid允许在jqGrid的formEditing选项中指定表单编辑选项/回调（请参阅the wiki article）。因此，您可以使用

将click句柄绑定到img.genericnotes

formEditing: {
    beforeShowForm: function () {
        $("#characteristic") // select textarea#characteristic
            .next(".genericnotes")
            .on("click", function () {
                alert("Click");
            });
    }
}

Answer 2

Try var tControl = $(this).attr("name");