$("#form_field_field_type").live("click", function() {
console.log("I reach over here");
});
It seems to work to me. This demo shows that clicking the <select> will clone the first one and prepend it to <body>.
I got the idea... You can fire the change event instead of the click event, so use the following code;
$("#form_field_field_type").live("change", function() { console.log("I reach over here"); });
I hope it will work it out!!!
Related
I want to hook an event in my select2 once it gets cleared. The select2 was initalized with allowClear: true. Yet the event
$select.on('select2-removed', function(event) {
console.log(event);
});
does not trigger when resetting the select2 with the clear button.
select2 v4.0.3
$('#smartsearch').on('select2:unselecting', function (e) {
alert('You clicked on X');
});
For all the select2 Options & Events
For me the only thing that worked is the 'select2:unselect' event... (In non-multiple select box)
According to the select2 source code, the clear method use the event select2-clearing instead of select2-removing. So you should listen to this event too.
select2-clearing and select2-removing are triggered before the removal. select2-removed is triggered after.
Keep in mind that clear does not always trigger the select2-removed event. It look like this event is triggered only if an element is actually removed from the input.
I got it working with the 'select2-removed'-event instead of 'select2-removing' when using the clear button.
As to why it does not trigger still eludes me.
I wanted to get data about the element just got removed on removed event. Following code worked for me;
$('#selector').on('select2:unselect', function (e) {
var data = e.params.data;
});
If you are working with 4 or above version then use
$('#id').on('select2:unselecting', function (e) {
alert('You clicked on X');
});
Below 4 version
$('#id').on('select2-removing', function (e) {
alert('You clicked on X');
});
Make sure for 4 or above version it is select2:unselecting colon(:)
Less than 4 version it is select2-removing -(hyphen)
I am unable to trigger the change of the text in the current scenario.
If i click on the button i am changing the content of the text. So how can i trigger the change of the text which is caused by external event.
For example in a click of a button I can able to fill any text in the textbox, able to paste texts and using mouse and keyboard. In these all scenarios and scenarios like these also I want the event to be fired.
I have already tried the following.
$('#text_id').on('change', function () {
alert('This is not trigged when i changed the text');
});
The alert should come when the text is changed. There might be many possible sources to change the text.
This is the Fiddle i created.
Thanks in advance.
This is my updated fiddle
Updated Fiddle - http://jsfiddle.net/upa2A/1/
$(document).ready(function () {
$(document).on('click', "#button_id", function () {
$('#text_id').val('TExt changed')
});
$(document).on('change', "#text_id", function () {
alert('This is not trigged when i changed the text');
});
});
Issues in original Fiddle -
Code has to be inside $(document).ready()
Missing () after function
Incorrect use of $.on (Read more about it on http://api.jquery.com/on/)
Edit based on comment from asked -
Updated Fiddle - http://jsfiddle.net/upa2A/4/
$(document).ready(function () {
$(document).on('click', "#button_id", function () {
$('#text_id').val('TExt changed').change();
});
$(document).on('change', "#text_id", function () {
alert('This is not trigged when i changed the text');
});
});
More edit based on comments thread -
From http://api.jquery.com/change "but for the other element types the event is deferred until the element loses focus."
Since, when changing via button click, text box wasn't focussed, the trigger does not happen automatically.
I saw your code in jsfiddle. you missed in some brackets and semicolon . otherwise ur code write . pls check jquery library code.
$('#button_id').on('click',function()
{
$('#text_id').val('TExt changed');
}
);
$('#text_id').on('change',function() { alert('This is not trigged when i changed the text');
} );
Try the below code. But for this you should use jQuery. It'll raise the event whenever the text changed.
$('#text_id').on('input propertychange paste', function() {
alert('Text Changed');
});
the working fiddle is here
This event surely raised on text change. If it is not useful for you surely someone else will be happy for this.
var txtVal = '';
setInterval(function() {
if ($("#text_id").val() != txtVal) {
txtVal = $("#text_id").val();
alert("Text Changed");
}
}, 10);
working fiddle is here
I have the following code that hides one text box and shows another. When the next one shows, I need the cursor to be on it, so I call .focus() on it. However, even though I have the call to .focus() as the second parameter, it still isn't focusing. Any ideas?
$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show(0, function() {
$(this).focus();
});
});
});
Sorry for the trouble everybody. It turns out that after messing with it some more, my DOM traversal wasn't quite right. I removed the divs I had around the input boxes and it works like a charm. Thank you.
That behavoiur occurs, becaus $(this) refers to the just hidden input field change your code like:
$(this).next().show(0, function() {
$(this).next().focus();
});
$(document).ready(function(){
$('.dummy-password-input').on('click', function() {
$(this).hide();
$(this).next().show().focus();
});
});
EDIT:
check this fiddle
i have the following situation and i dont really have a clou why it does not fire:
$('.tab3').click(function() {
//console.log("test");
$('.coda-nav').append('blabla');
$('.coda-nav').append('blabla');
$('.coda-nav').append('blabla');
});
this works pretty well. if i click on tab3 it appends 3 links! then:
$('#ref2').click(function() {
console.log("test");
});
pls tell me why nothing happened onclick at ref2!
thanks ted
Take a look at: http://api.jquery.com/on/
Your click handler does not get attached to the newly created <a>. You need On to attach it on the fly.
So that would become:
$(".coda-nav").on("click", "#ref2", function() {
console.log("test");
});
Because the anchors are added after the click event is bound, i.e. elements do not exist when you bind the event.
You can use event delegation to fix it:
$(".coda-nav").on("click", "#ref2", function() {
console.log("test");
});
I've seen a couple of questions in regards to bootstrap modals, but none exactly like this, so I'll go ahead.
I have a modal that I call onclick like so...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
This works fine, but when I show the modal I want to focus on the first input element... In may case the first input element has an id of #photo_name.
So I tried
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
But this was to no avail. Lastly, I tried binding to the 'show' event but even so, the input won't focus. Lastly just for testing, as I had a suspiscion this is about the js loading order, I put in a setTimeout just to see if I delay a second, will the focus work, and yes, it works! But this method is obviously crap. Is there some way to have the same effect as below without using a setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
Try this
Here is the old DEMO:
EDIT:
(Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3)
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
Starting bootstrap 3 need to use shown.bs.modal event:
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
or put the focus on the first visible input like this:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
http://getbootstrap.com/javascript/#modals
I am using this in my layout to capture all modals and focus on the first input
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it´s something about the animation!
I had problem to catch "shown.bs.modal" event.. And this is my solution which works perfect..
Instead simple on():
$('#modal').on 'shown.bs.modal', ->
Use on() with delegated element:
$('body').on 'shown.bs.modal', '#modal', ->
Seems it is because modal animation is enabled (fade in class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.
I can think of two ways to solve this problem:
Remove fade from class, so the dialog is immediately visible after calling .modal('show'). You can see http://codebins.com/bin/4ldqp7x/4 for demo. (Sorry #keyur, I mistakenly edited and saved as new version of your example)
Call focus() in shown event like what #keyur wrote.
I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
You just need to call modalEvents() on document ready.
Use:
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
So, you can use the same modal to load what you want without worry about remove events every time.
I had the same problem with the bootstrap 3 and solved like this:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
Bootstrap has added a loaded event.
https://getbootstrap.com/docs/3.3/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
Bootstrap modal show event
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
A little cleaner and more modular solution might be:
$(document).ready(function(){
$('.modal').success(function() {
$('input:text:visible:first').focus();
});
});
Or using your ID as an example instead:
$(document).ready(function(){
$('#modal-content').modal('show').success(function() {
$('input:text:visible:first').focus();
});
});
Hope that helps..