JqGrid: Trying to add a + button to the right of a "add" form field (using elmsuffix)

Question

I can get the icon to show up, and it fires a simple alert if I place the javascript line in the href but I cannot attach a dialog object to the link id.

I am using "elmsuffix" to get the html there:

This works:

{name:'name',index:'name',width:100,  editable: true,  formoptions:{elmsuffix: "<a id="companysearch" href="javascript:alert('yay it worked!');" ><span id="companysearchicon" class="ui-icon ui-icon-plus" style="position:absolute; top:2px; right:25px; "></span></a>"}},

This does not:

$("#companysearch").click(function(){ alert('yay it worked!'); });

{name:'name',index:'name',width:100,  editable: true,  formoptions:{elmsuffix: "<a id="companysearch" href="javascript:void(0)" ><span id="companysearchicon" class="ui-icon ui-icon-plus" style="position:absolute; top:2px; right:25px; "></span></a>"}},

Its almost like the scopes are preventing the objects to work with each other (or am I just plain, approaching it wrongly)

Thanks

Andrew Finegan

Answer 1

First of all I suppose you use elmsuffix: '<a id="companysearch" ...' and not elmsuffix: "<a id="companysearch" ..." to have correct syntax without escaping every " characters.

The problem from your question is when you use $("#companysearch").click(...). At the moment the element with id="companysearch" must already exist in DOM of the page. So you should either use in inside of beforeShowForm event handler:

$("#list").jqGrid('navGrid','#pager',{},
    { // edit options
      beforeShowForm: function(form) {
          $("#companysearch").click(function(){
              alert('yay it worked!');
          });
      }
    });

or use jQuery.live method:

$("#companysearch").live('click', function() {
    alert('yay it worked (live)!');
});

In the small example you can see live both the ways working.