CODEWITHSUNDEEP
javascriptjqueryevents
maja
maja

Reputation: 18044

jquery .focus(func) doing process several times

EDIT:

Thanks to Puneet who created this fiddle: http://jsfiddle.net/G3vSK/

It seems that it doesn't work on Chrome Version 28

On Firefox (v22) the alert comes once, but you can't enter anything in the boxes

Another problem I can't solve: This is my Javsacript-Code:

function updateFieldsetStyleAdjustment(){
    alert("update");
    $('fieldset').not('[data-style=\'none\']').find('input, select, textarea, button')  //find input-fields

        .focus(function(){
            alert("active: "+$(this).attr('id'));
        });
}

This function should add an onfocus-Handler to some input-fields on my site. Whenever I focus an field to insert a value, it should be called.

My problem is that, when I focus an input-field, the function is called several times. The number of calls/alerts varies from 3 to 16 or more per focus-Event.

However, my field never looses focus.

I apply the onfocus-event 2 times (The "update"-alert appears twice), but this is normal. (I don't add 16 onfocus-event listeners to the input-fields).

Anyone knows what I'm doing wrong?

EDIT:

Here's the HTML-snipped:

<fieldset id="fs_1" data-style="data" d class="">
    <legend>General Information</legend>

    <div class="lineWrapper inputTooltip" data-tooltippos="left">
        <label for="fs_1_form51f37d255fb35_name">Name</label>
        <span class="inputWrapper">
            <input type="text" id="fs_1_form51f37d255fb35_name" name="name" autofocus="" maxlength="40" tabindex="50">
        </span>
    </div>

    <div class="lineWrapper inputTooltip" data-tooltippos="left">
        <label for="fs_1_form51f37d255fb35_ansprechperson">Ansprechperson</label>
        <span class="inputWrapper">
            <input type="text" id="fs_1_form51f37d255fb35_ansprechperson" name="ansprechperson" maxlength="40" tabindex="51">
        </span>
    </div>
    <!-- ...more Wrappers with input-fields... -->
</fieldset>
<!-- ...more fieldsets... -->

How I call it:

1.) $(document).ready(function() { updateFieldsetStyleAdjustment(); });

2.) After every Ajax-Request I call it again (the input-fields are loaded via Ajax)

unbind:

When I put $(this).unbind('focus'); inside my focus-eventhandler, it is triggered only once. But when I focus the same field again, it doesn't work anymore (as expected).

When I put $('*').unbind('focus'); on the beginning of my updateFieldsetStyleAdjustment()-Function, it doesn't change anything.

Upvotes: 1

Views: 1071

Answers (2)

maja
maja

Reputation: 18044

The alert() was the bug. Realised that everything was working fine without the alert(). And the event was also only triggered once.

The alert always unfocused the input-field, and so a new alert was created.

I hate it, when my debugging-code is the only bug in the program.

Upvotes: 1

Puneet
Puneet

Reputation: 603

I think your problem lies here. After every Ajax-Request I call it again (the input-fields are loaded via Ajax).

Try binding focus with only the new fieldset generated after ajax calls (try using jQuery.on() function). Alternatively try 

    $('fieldset').not('[data-style=\'none\']').find('input, select, textarea, button').unbind('focus');
 //unbind focus from previously binded dom elements.

and then call 

updateFieldsetStyleAdjustment

Upvotes: 0

Related Questions