We Keep Coding

Add event to datalist option

I have an input box that uses HTML5 datalist options, On select of one of this option or when someone types in the field, I want to dynamically add another input box.
d3.select('#inputBox').on('keyup', function() {
// do this
addInputBox(0);
});
The above code works fine for when I type in the input box.
d3.select('#inputBox').on('input', function() {
// do this
addInputBox(0);
});
I tried to use an oninput event as seen in the code above, it works for when an option is selected, but the problem is that it still works for when someone inputs into the field.
For every input, the addInputBox() function gets calles, this isn't what I want, I know there is going to be a better event listener I could use. I have tried almost everything, Please Help!

Set values in fields created dynamically

have a simple registration form which can replicate the same N times for N inscriver people at once.
I have to set the values ​​of the VALUE field depending on selected SELECT option Participant independently for each registration form dynamically created option.
I tried several things but I can not make the event ( on change) fired from a given SELECT change only the value of that piece of form created in Javascript field.
I would like to create fields where SELECT fired an event that only alter its respective VALUE field according to the selected users in the SELECT option and that the trigger its SELECT, the VALUE field of the registration form to receive the value of the select value changed. I want this to happen independently created for all sections on the form .
I'm having the following problem, it seems that other SELECTS created dynamically follow the original select . Are not independent.
How can I fix this? The link below is the source code and the same
link: http://jsbin.com/lupeweha/5

I see you actually fire the event on the select by calling the "select" element, which then fires the same event on ALL the selects! Create ids, and then call your functions independently.
function bindSelect(){
$('select').on('change', function() {
....
// hey, here all the selects get this function, on change.
$('#main-select').on('change', function() {
...
$('#other-select1').on('change', function() {
...
$('#other-select2').on('change', function() {
Hope it helps.

Stop custom datatables search box from loosing focus

I'm trying to customize the datatables search box in order to better integrate it into a bootstrap based UI. I have a table-controlbar 'horicontal_group' that contains other controls where I'd like to put the search box. It works as far as I can generate filtering events, however there is one very annoying problem:
the search box is loosing focus, every time the filter function is called.
This is a stopgap since I'd like typeahead functionality instead of letting the user click a button to search. I'd also implement a delay between keypresses and filter events of course, but first I have to deal with this focus issue.
This is how the dom looks like using the default 'f' option in datatable's sDom:
This is what I'd like to have:
wrapper_div.find('.dataTables_filter input')
.addClass('form-control tableview-search')
.appendTo(horicontal_group) //if this is uncommented, it works fine
.bind('keypress keyup', function(e){
datatable.fnFilter(searchTerm);
});
What I've tried so far (without any effect on the outcome):
use a freshly created input field instead of the field provided by the sDom-parameter 'f' (and delete 'f' from sDom)
use stopPropagation() on the event
unbind the events on the input field before binding the new ones
use .on('input' ..) instead of .bind('keypress keyup' ..)
append the whole dataTables_filter div to horicontal_group instead of just the input field

Ok, while writing this I've thought about it some more and I came to a solution that I'm gonna leave here. Using the built-in wrapper-div and adapting it to bootstrap instead of recreating it from scratch, solved my issues. If you have more insight on why the focus is lost I'd still be glad for your input.
I now initialize the sDom like this:
sDom: '<"row"<"col-lg-12 col-tableview-controls"f>><"row"<"col-lg-12"RlrtiS>>'
After dt is initialized I fixup the dom like this (note that I also used the merged search box from this thread: Add Bootstrap Glyphicon to Input Box:
var horicontal_group = wrapper_div.find('.dataTables_filter');
horicontal_group.addClass('input-group pull-right horicontal-group');
var merged_input = $("<div class='input-group merged'><span class='input-group-addon search-addon glyphicon glyphicon-search'></span></div>")
.appendTo(horicontal_group);
var input = horicontal_group.find('input');
input.addClass('form-control tableview-search')
.appendTo(merged_input)
.on("focus blur", function() {
$(this).prev().toggleClass("focusedInput")
});
var label = horicontal_group.find('label');
label.remove();

How do I dynamically assign IDs to form fields with event listeners?

I am allowing for the user to click a link, which will add a field to the page. The user can click the link to add as many fields to the page as they like. When the field is clicked, a calendar appears, because it is a date field. I am using the Any+Time calendar. The jQuery waits for a click event from the field with a specific id. Here is the code:
$('#start_date').click(
function(e) {
$('#start_date').AnyTime_noPicker().AnyTime_picker().focus();
} );
The id is start_date. The problem is that the user can click the link to add a new field called start_date and since the id is the same, the jQuery event listener cannot uniquely identify each field. Is there a known solution for this kind of a scenario?

I'm not clear: does appending the unique number not work for you? If you're OK creating the field but it's not attaching the click handlers, then try adding a class="pickerField" to the elements when you create them, and change your handler to:
$('.pickerField').click(
function(e) {
$(this).AnyTime_noPicker().AnyTime_picker().focus();
} );
I believe that should work with jQuery 1.7.2. If for some reason it doesn't, then try the following instead:
$('.pickerField').on('click',
function(e) {
$(this).AnyTime_noPicker().AnyTime_picker().focus();
} );
If you're using an older version of jQuery, try using live instead of on.

Make a combobox fire changed event when first (already selected default) element is clicked in a webpage

I'm designing a webpage where I have a combobox (drop down list) and it has several items in it. I want to be able to click the element and select the first item and it should fire the changed event.
Initial situation:
I will click the button next to 1/2000 and:
Afterwards, if I click on 1/2000, I want the changed event to fire. I know it is simple with jQuery, but I couldn't find how to search for this problem so couldn't find an answer.
Thanks, Can.

I think James is right, the question is not how to simply detect a change, he rather wants to know detect the click.
You could use this code but you need to find a way to make it not fire twice if another option is selected:
$('select option').click(function(){
$(this).parent('select').trigger('change');
});
$('select').change(function(){
alert("Bam!");
});

The event is fired when you select the option, if you want to do something when it's fgired you should do:
$('#yourselect').change(function(){
alert('changed');
});
Look at this fiddle:
http://jsfiddle.net/5wc37/
EDIT - tanks to james now i understand what the poster want. One thing you coukd do is binding the click event to the select and check if the target is an option or a select. if it's an option, do what you want:
$('select#yourselect').click(function(e) {
if(e.target.tagName === "OPTION"){
alert(this.value);
};
});
fiddle
http://jsfiddle.net/5wc37/12/