.blur() not working for label

Question

I want to call [webmethod] on blur of label. But my problem is:

$('#clarity_lbl').on('blur', function () {
        alert("hi");
});

or

$('#clarity_lbl').blur(function () {
         alert("hi");
});

or

$('#clarity_lbl').bind('blur', function () {
        alert("hi");
});

is not working. #clarity_lbl is id of my label.

can you http://jsfiddle.net it so that we can have a look to exact problem — Arpit Srivastava, Feb 17 '15 at 06:48
might be that your target element is not loaded when the script is executed.. try using event delegation - http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Feb 17 '15 at 06:52
My target element is static not dynamic. It is also display while loading page. — Trusha Savsani, Feb 17 '15 at 06:58
try `$(document).on('blur', '#clarity_lbl', function () {})` — Arun P Johny, Feb 17 '15 at 07:03

Wesley Smith · Answer 1 · 2015-02-17T07:11:10.313

0

As Arun mentioned, your problem is likely that the element you are targeting does not yet exist on the page when you attempt to bind your handler to it.

To fix this, you can use event delegation. Instead of binding to the element directly (because it doesn't exist yet), you bind to another element in it's hierarchy that is present on page load delegating the listener to it. In the delegation, you pass in the id or class of the target element. So this parent element will then listen for clicks on elements matching your selector within it's children and call your function if it hears one.

You can always delegate to $(document) but best practice is to delegate to an element as close to the dynamically added target element as possible.

$("#container").on("blur","#clarity_lbl", function(event, ui) {
    alert("hi");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">
  <input type="text" id="clarity_lbl" value="click then click away" size="100"/>
</div>

edited Feb 17 '15 at 07:11

answered Feb 17 '15 at 07:05

Wesley Smith

19,401
22
85
133

Thanks bro... It works properly for textbox, but i want this for label only. what should i do?? – Trusha Savsani Feb 17 '15 at 07:10
For a label like: `Male` ? If so, how is the label getting `focus` in the first place? Is it `contentEditable="true"` or something? Can you better describe what you are trying to do? Maybe this is an X Y problem http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem – Wesley Smith Feb 17 '15 at 07:14
My label is for custom drop down list. So I want to call web service on its blur event. Based on label's value I have to do some task. my label is like:
FL
– Trusha Savsani Feb 17 '15 at 07:21
Is this custom as in self written or is it a library you're using for the dropdown? – Wesley Smith Feb 17 '15 at 07:23
Dropdown contains list items from sql database. – Trusha Savsani Feb 17 '15 at 07:25
What happens when the user clicks one of the labels? – Wesley Smith Feb 17 '15 at 07:26
Thanks bro... I got it. I found one alternate of label. Now its working. – Trusha Savsani Feb 17 '15 at 07:32

.blur() not working for label

1 Answers1