Question

I’m using the jqModal plugin to attach a dialog box to a button click. I’m trying to attach the following box to the page:

    suqBoxInner = document.createElement("div");
    suqBoxInner.id = "suq_box_inner";

    $(suqBoxInner).jqDrag('.jqDrag').jqResize('.jqResize').jqm({
      trigger: '#suq_button',
      overlay: 0,
      onShow: function(h) {
        return h.w.css('opacity', 0.92).slideDown();
      },
      onHide: function(h) {
        return h.w.slideUp("slow", function() {
          if (h.o) {
            return h.o.remove();
          }
        });
      }
    });

However this only works if I run this binding code after the div’s been inserted into the page. That is I have to use something like $("#div_on_page").after(suqBoxInner) before running the jqDrag code. What are my options for binding it before it’s inserted into the page? I could use $.live() but that has to bind to a mouse event and the jqModal plug in uses bind on the trigger listed inside the function call.

Answer 1

It appears that this plugin requires the div (suqBoxInner) to be on the page. So short of modifying the plugin, I’m not sure you have many options as-is. Perhaps you may want to rethink how you are implementing the plugin? How is suqBoxInner being placed on the page? Is it after a specific event, or action?

One solution I can think of off the top of my head is to fire an event after suqBoxInner is placed on the page. The event would then initialize jqModal.

Just a thought. Good luck.