CODEWITHSUNDEEP
javascriptjquery
Unix
Unix

Reputation: 2644

jQuery - the function doesn't get an ID/class

This function doesn't get the ID or class (first line), so the code is applied to all the fieldsets. For me that's not a big problem, but I would like to focuse the code on two specific IDs to make the code more compatible for plugins.

$('#feedburner_widget').ready(function() {
$('input').focus(
function(){
    $(this).closest('fieldset').addClass('fieldset change-fieldset');
});

$('input').blur(
function(){
    $(this).closest('fieldset').removeClass('change-fieldset');
});
});

Basically, this code adds a class to a fieldset when the user clicks on the input field. The ID is on the first line, but the code applies the effect to all the fieldsets. And it works exactly in the same way if I change '#feedburner_widget' to document. What I'm doing wrong? Thanks.

Edit: And this is the HTML code:

    <form id="feedburner_widget" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo esc_attr($user); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <fieldset >
            <input type="text" class="field" name="email" placeholder="<?php echo esc_attr($text); ?>" />
            <input type="hidden" value="<?php echo esc_attr($user); ?>" name="uri" />
            <input type="hidden" name="loc" value="<?php bloginfo('language'); ?>"/>
            <span>
                <input type="submit" value="" />
            </span>
        </fieldset>
    </form>

Upvotes: 0

Views: 59

Answers (1)

eireksten
eireksten

Reputation: 46

When you do $('input'), you are asking jQuery to do a global search in the whole document. It does not 'remember' that you have just fetched the #feedburner element.

To search for only the elements in the #feedburner element, you could use the find() function on the jQuery object, like this:

$(document).ready(function() {
    var $inputs = $('#feedburner_widget').find('input');
    $inputs.focus(function(){
        $(this).closest('fieldset').addClass('fieldset change-fieldset');
    });

    $inputs.blur(function(){
        $(this).closest('fieldset').removeClass('change-fieldset');
    });
});

In this particular case, you could also just alter the CSS selector to search directly for inputs inside the #feedburner_widget like this: $('#feeburner_widget input') If that element was already in a variable in your code, however, you should use the find method.

Upvotes: 1

Related Questions