Added controls inside Header/Toolbar, cant access via Jquery selector.

williamflock

Hello,

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.

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>');

Thank you
Bill

williamflock

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.