jQuery数据表，sDom自定义工具栏无法选择输入字段

Question

I was successful in adding a custom toolbar to the sDom. I have two input textboxes, and a button. I can create a click event on the button via Jquery, but the two textboxes are not responding to Jquery selectors using their ID or class names, I want to wire a Jquery event to one of the textboxes.

I can easily access the two input boxes using CSS (ie: .typeahead1{ display: none; }.

When I inspect the element (input textbox) via the browser developer tools, the class name and id are displayed that I'm using to select the elements with Jquery.

To test my Jquery selection I tried to hide the elements in the sDom. I can easily hide the standard datatables search filter using ($('.dataTables_filter, .dataTables_info').hide();

I can not hide the individual input textboxes contained in the custom toolbar. I can hide the whole custom toolbar, but not the individual controls.

I used this to inject the custom toolbar into the sDom (ie: sDom: '<"H"<"toolbar">f>t<"F"ip>',).

How can I select a single item (input id="City1") in my custom toolbar using Jquery when it is inside the sDom?

I'm sure this is a Jquery selector syntax I'm just not getting right.

Here is the custom toolbar I'm injecting into the sDom: $("div.toolbar").html('<div class="toolbarCustom">City, State &nbsp;<input id="City1" class="typeahead1" type="text" size="40" placeholder="City and State separated by comma" autocomplete="off" />&nbsp;&nbsp;Zip <input id="ZipCode1" placeholder="Zipcode" type="text" size="10" />&nbsp;&nbsp; <button id="btnSetLocation" type="button" class="btn btn-primary">Set Location</button></div>');

Any help would be greatly appreciated.

Thank you Bill

Answer 1

After much research and sheer frustration, I was able to get my control working.

The main issue was that the div containing the controls was being dynamically created, after I hard coded the html into the form, Jquery was able to easily recognize the id and class name.

I did not realize that Jquery binds only the elements that exist at the time of binding.

I could have gotten away with a late binding with $(document).on..., but I could not match it up with the bootstrap typeahead addon I wanted to use.