L'ajout de keyup les événements générés dynamiquement des éléments à l'aide de jquery

J'ai un bouton qui crée des zones de texte de façon dynamique et il y a un autre bouton "Effacer".

Si il n'y a pas de texte dans le champ de texte, puis sur le bouton effacer est désactivé ou sinon, il sera activé. Il travaille pour la zone de texte qui est créé lorsque le dom est chargé, mais pour le créer dynamiquement des zones de texte, il ne fonctionne pas.

Ici est la HTML

<input type="button" value="Click Me" class="a" />
<input type="button" value="Clear" class="a" id="clearBasicSearch" />
<div id="basicSearchFields">
    <input type="text" />
</div>

Javascript

$(".a").click(function () {
    $("#basicSearchFields").append("<input type='text' class='b' />");
});

/*$(".b").live("keyup", function () {
        //alert('you pressed ' + $(this).val());
        $(this).val($(this).val().toUpperCase());
        });*/

var toValidate = $("#basicSearchFields input[type='text']");
$("#clearBasicSearch").removeClass('hidden').removeClass('button').attr('disabled', true);

toValidate.live('keyup', function () {
    console.log("hi");
    var valid = false; //default is false
    toValidate.each(function () {
        if ($(this).val().length > 0) {
            valid = true; //non-empty element found
            return false; //break
        }
    });
    $("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
});

JSfiddle lien - http://jsfiddle.net/TpExS/

S'il vous plaît aidez-moi!!

Je ne peux pas utiliser " on " que je suis en utilisant une version de jquery
Mise à niveau de votre version jquery
BTW, comme de jQuery 1.7, l' .live() la méthode est obsolète. Utiliser .sur() à la place ! api.jquery.com/on
Même si vous ne pouvez pas utiliser .on(), si vous êtes à l'aide de >= 1.4.2 vous pouvez et devez utiliser .delegate() au lieu de .live().

OriginalL'auteur Ansuman | 2013-08-28

javascript jquery

Essayer cette

$(document).on('keyup', "#basicSearchFields input[type='text']",function () {
    console.log("hi");
    var valid = false; //default is false
    var toValidate = $("#basicSearchFields input[type='text']");
    toValidate.each(function () {
        if ($(this).val().length > 0) {
            valid = true; //non-empty element found
            return false; //break
        }
    });
    $("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
});

Je ne peux pas utiliser "on", comme je suis en utilisant une faible version jquery. Je peut même pas mettre à jour la version jquery comme il pourrait le briser d'autres fonctionnalités.
Aussi peut-on créer une fonction appelée "valider" et de faire les choses?

OriginalL'auteur Okky

Ici est une autre solution possible http://jsfiddle.net/TpExS/2/

Remarque: JQuery 2.0.2 utilisé

Javascript

$(document).ready(function(){
    var fields = $('input[class=b]');
    for(var i = 0; i < fields.length; i++){
        $(fields[i]).on('keyup', validateFields);
    }
});

$(".a").click(function () {
    var newField = $('<input/>').attr('type', 'text').attr('class', 'b');
    $(newField).on('keyup', validateFields);

    $("#basicSearchFields").append(newField);
});

function validateFields(){
    if($(this).val().length){
        $('#clearBasicSearch').attr('disabled', false);
        return;
    }

    $('#clearBasicSearch').attr('disabled', true);
    var fields = $('input[class=b]');
    for(var i = 0; i < fields.length; i++){
        if($(fields[i]).val().length){
            $('#clearBasicSearch').attr('disabled', false);
            return;
        }
    }
}

OriginalL'auteur Dart

Essayer

$("#basicSearchFields").delegate("input[type='text']", 'keyup', function () {
    validate();
});

function validate(){
    console.log("hi");
    var valid = false; //default is false
    var toValidate = $("#basicSearchFields input[type='text']");
    toValidate.each(function () {
        if ($(this).val().length > 0) {
            valid = true; //non-empty element found
            return false; //break
        }
    });
    $("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
}

Démo: Violon

il n'y a pas de "vivre" dans les nouveaux jQuery versions d'essai 'sur'
c'est là, dans la version 1.6 qui est utilisé par les OP
Peut-on créer une fonction que de valider et de faire la même chose?
voir la mise à jour
utiliser $("#basicSearchFields d'entrée:texte")

OriginalL'auteur Arun P Johny

1

Simple, les Mises à jour de vos "toValidate" variable lorsque vous ajoutez plus de elementson le clic.
```
$(".a").click(function () {
    $("#basicSearchFields").append("<input type='text' class='b' />");
    toValidate = $("#basicSearchFields input:text");
});
```
Pourquoi? Le temps que vous toValidate, il retournera un tableau à ce moment, vous devriez le met à jour à chaque fois qu'il y a de nouveaux éléments, ou pour le contrôle de l'intérieur de l'événement en direct.

OriginalL'auteur Roger Barreto

$(document).on('keyup', "input#basicSearchFields",function () {  
    //do something here
}

OriginalL'auteur Shirish Dhotre

Vous devez vous connecter pour publier un commentaire.