Focusin using live not working -jQuery - javascript

I am trying to attach a focusin event on a future element using jquery 1.5.2. Just to clarify,this has also been attempted using jQuery 1.7.2 with the same issue.
The event is not firing as i expected it to. Yet a similar click event works correctly using .live
I've put together an example here for you to take a look at my code. Hopefully this will not been a simple issue (although it always seems to be!).
Link to jsfiddle
This is my focusin event i am trying to attach
$(".active").live("focusin", function() {
$(this).text("focusin using live");
});
I believe i have found some related questions, but im unable to fix my code using them. I would prefer an explanation over a "here is your code corrected answer".
If you think i need to add more information to my question please leave a comment.
Related
jQuery focusin and focusout live events are not firing
Why the "focusin" event handler isn't called?

You need to focus the element if you expect the focusin event to trigger. The fact that you are applying a DOM element the .active class doesn't mean that you are focusing it.
$('.active').live('focusin', function() {
$(this).text('focusin using live');
});
$('.active').focus();
​
Here's a demo.
Another thing you will notice is that .live() supports the focusin event starting from jQuery 1.7.1. Obviously in this version of jQuery, .live() is deprecated and you should use .on():
$(document).on('focusin', '.active', function() {
$(this).text('focusin using on');
});
$('.active').focus();
​

Related

select2-selecting event not getting fired

I am using Select2 in my website, and I'm trying to use the select2-selecting event, but its not firing. I am also using Backbone.js in the app, so the first thing I tried was adding the select2-selecting to my events object:
// 'change .city':'cityChanged'
'select2-selecting .city':'cityChanged'
Note that I have a change event commented out - this change event works properly. In the documentation for Select2, the select2-selecting event is put directly on the object, not like this:
$('.city').select2().on('select2-selecting', function(e){
console.log('here');
});
instead, its supposed to be used like this:
$('.city').on('select2-selecting', function(e){
console.log('here');
});
I have also tried adding the event both of these ways, but the event didn't fire (I did check and the element was created on the DOM before I added the events).
When I add the event in the first method with the Backbone.js, the event is listed in the event listeners in the chrome debug console - it just doesn't get fired. Does anyone have an idea what is going on?
what version of select2 are you using?
I was having the same problem until I realize I was using the 3.3 version where this select2-selecting event not exists.
This has been included in the 3.4 version.
There was a change on earlier versions also where it changes name:
select2-close is now select2:close
select2-open is now select2:open
select2-opening is now select2:opening
select2-selecting is now select2:selecting
select2-removed is now select2:removed
select2-removing is now select2:unselecting
On even older versions, 'select2-removed' and 'select2-removing' events listed on #santi-iglesias' answer doesn't exists. You have 'removed' instead. Also, to get the affected optioin value, use 'event.val'.
So you can do something like this:
$('.select').on('select2-selecting removed', function(evt) {
var value = evt.val; //do something with this
});
Checked at v3.4.3.

jQuery StopPropagation issue

I want to close the div if someone clicked outside that div. I have the below code:
$('body').click(function(e) {
$('div.test').slideUp('slow');
});
$('div.test').live('click',function(e) {
e.stopPropagation();
});
But the issue is that when someone click inside the div, the div itself is closing. I want to prevent that. After debugging I found a weird stuff the debugger is hitting the $(body).click first instead of $(div.test), May I know the reason for this? Can you help me in fixing the issue?
The problem is with your use of live.
live is a way of saying "bind a handler to the root element and capture any events that originated on an element matching a selector". It's a short form of delegate. This is possible because of "bubbling": events on elements are triggered on the element's ancestors as well.
If you do not specify otherwise, live binds the event handler to the document. The event handler on the body will be triggered first since the event won't have bubbled up to the document handler, where the e.stopPropagation() is.
The easiest solution would be to change live to click:
$('div.test').click(function(e) {
If you need to use live, introduce a container element, and handle the event there. I'll use delegate as I prefer its syntax, but you could use live if you preferred:
$('#container').delegate('div.test', 'click', function(e) {
e.stopPropagation();
});
The event is handled on #container and propagation is stopped, so the event never reaches the body's event handler.
What happens if you handle the body click with live() too?
I believe the live click handler doesn't propagate the event in the same way as a standard click. See this documentation.
I believe the problem arises because you are setting a click handler to <body>
I tried the same thing with <p> instead of <body> and it seems to work fine.
Here's a relevant fiddle:
http://jsfiddle.net/seNXV/7/
live() does not stop propagation. Says do in the jQuery docs.
You need to use delegate()

jQuery: How to add event handler to dynamically added HTML elements?

I have the following code:
$(document).ready(function({
$(".click").click(function(){
alert(' The Button Was Clicked !');
});
}));
This works fine.But If I add an element with the same class to the web page, as shown here:
$('#clicked').click(function(){
$("#area").append("<button class='click'>Click me</button>");
});
Then the event handler I added before to the .click class won't work for this new element.
What's that best way to add event handlers to elements that were added dynamically ?
UPDATE
It's been a while since I posted this answer and things have changed by now:
$(document).on('click', '.click', function() {
});
Since jQuery 1.7+ the new .on() should be used and .live() is deprecated. The general rule of thumb is:
Don't use .live() unless your jQuery version doesn't support .delegate().
Don't use .delegate() unless your jQuery version doesn't support .on().
Also check out this benchmark to see the difference in performance and you will see why you should not use .live().
Below is my original answer:
use either delegate or live
$('.click').live('click', function(){
});
or
$('body').delegate('.click', 'click', function() {
});
In reference to your code, the way to do it would be.
$('.click').live('click', function(){
... do cool stuff here
});
Using the .live() function allows you to dynamically attach event handlers to DOM objects.
Have fun!
for all the elements added dynamically to DOM at run time , please use live
http://api.jquery.com/live/
After jQuery 1.7 the live method just points to .on() method. And I had alot trouble finding out how to bind event handler to element which is appended to the DOM after its loaded.
$('body').live('click', '.click', function(){
//Your code
});
This worked for me. Just a little tip for those having trouble with it also.

jQuery.click not working after adding element to the DOM

I have a simple jQuery('div#star').click(function.
The function works once when the DOM is initially loaded, but at a later time, I add a div#star to the DOM, and at that point the click function is not working.
I am using jQuery 1.4.4, and as far as I know, I shouldn't need to use .live or .bind anymore. There is never more than one div#star in the DOM at any one time. I tried changing from id="star" to class="star" but that didn't help.
Any suggestions on how to get this working or why it isn't working?
I've had the .click inside the jQuery(document).ready, and in an external js file, and neither works after adding the div to the DOM.
This works with jQuery 2.0.3
$(document).on('click', '#myDiv', function() {
myFunc();
});
As of jQuery 1.7, the .live() method is deprecated. The current recommendation is to use .on() which provides all functionality covering the previous methods of attaching event handlers. Simply put, you don't have to decide any more since on() does it all.
Documentation is handily provided in the help for converting from the older jQuery event methods .bind(), .delegate(), and .live()
You still need to use live events.
http://api.jquery.com/live/
try
.on('event', 'element', function(){
//code })
You need to use either live or delegate here. Nothing has changed in this department since jQuery 1.4.4.
Try to think of it like this: click and bind attach an event to the element itself, so when the element disappears, all the information about the event does too. live attaches the event at the document level and it includes information about which element and event type to listen for. delegate does the same thing, except it attaches the event information to whatever parent element you like.
user "live" method $("div#star").live("click", function() {});
Doc
You can use delegate instead on :
$(document).delegate('click', "selector", function() {
//your code
});
I hope it will help.

Can I remove inline event handlers using jQuery?

I have some HTML with an onclick attribute. I want to override that attribute using jQuery. Is there any way to remove the click handler using jQuery? Using unbind doesn't work.
Try the .removeAttr() function:
$(function() {
$('a').removeAttr('onclick');
});
​
jsfiddle demo.
Once you've got rid of the onclick attribute you could attach your own click handler.
$("#theElement")[0].onclick = function() {
whatever();
};
// -- or --
$("#theElement")[0].onclick = null;
It's not that jQuery would make the standard DOM functions and properties go away. ;-)
As quoted in http://api.jquery.com/prop/ Removing an inline onclick event handler using .removeAttr() doesn't achieve the desired effect in Internet Explorer 8, 9 and 11. To avoid potential problems, use .prop() instead.
So this can be done as
$(function() {
$('a').prop('onclick', false);
});
There is a plugin for it, but you should only do this when you really need to. The plugin gives you the option to call the old function or to ignore it entirely.
jQuery Override Plugin
$(divElementObj).override('onclick', 'click', function(...));
Tried given options but worked partially as they removed one but not all.
Instead I tried following chaining as workaround. I am using ver 1.4.2.
jQuery("selector")
.removeAttr("onclick").removeAttr("onmouseout").removeAttr("onmouseover");

Categories