databinding to dynamically created elements

[aanderson1776]

I am attempting to autobind a ValueListBox to a select element decorated with chosen jquery plugin. http://harvesthq.github.io/chosen/ If I do not enable the chosen plugin the binding works perfectly fine. However with chosen enabled the model is not being updated with the value selected in chosen. Chosen generates a parallel div and renders a select like input and once a value is chosen it updates the original select. Perhaps the autobinding functionality is listening for click events while chosen directly updates the select. I thought I could manually bind it but the DataBinder class requires a Widget and since the chosen input is dynamically rendered in JavaScript this isn't an option. In my submit event listener I could just directly read the selected value from the DOM but I was wondering if there was a better alternative that still utilized the binding functionality?

@Inject
 @AutoBound
 private DataBinder<Project> projectBinder;


 @DataField("client")
 @Bound
 private ValueListBox<Client> client = new ValueListBox<Client>(new ClientRenderer());


...




    @Override
    protected void onLoad() {
        initJS();
    }


    public static native void initJS()/*-{
  $wnd.$(function($) {


  $('.chosen-select').chosen({
  allow_single_deselect : true,
  width : '80%'
  });


  });
    }-*/;

<div class="form-group">
                        <label for="client">Client</label>
                        <div >
                            <select class="chosen-select" id="client" data-placeholder="Choose a Client..." style="display: none;"><option value="Client1">Client1</option><option value="Client2">Client2</option><option value=""></option></select><div class="chosen-container chosen-container-single chosen-container-active" style="width: 80%;" title="" id="client_chosen"><a class="chosen-single" tabindex="-1"><span>Client1</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"><li class="active-result" data-option-array-index="0">Client1</li><li class="active-result" data-option-array-index="1">Client1</li></ul></div></div>
                        </div>
                    </div>