6

まあ、それはほとんど何が起こるかです。

ボタンは、入力フィールドに何かを入力した後にのみアクティブになり、クリック可能になります。私はそれを実装しようとしています。私は間違った方向に進んでおり、jQuery セレクターを別の場所に配置する必要があったか、コードに何か問題があるだけだと思います。

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length){
        $('.send-feedback').removeClass('inactive').click(function(){
            console.log('clicked');
        });
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})

基本的に、コンソールで「クリック」が複数回表示されますがconsole.log('key pressed')、チェックの前に追加するifと、予想どおり、キーダウンごとに1回表示されます。

何かアドバイス？

4

4 に答える 4

8

ボタンを に設定することもできますdisabled。これにより、clickイベントが発生しなくなります。

if($('textarea').val().trim().length > 0)
    $('.send-feedback').removeAttr('disabled');
else
    $('.send-feedback').attr('disabled','disabled');

click次に、関数を分離します。

$('textarea').on('input', function(){ ... });
$('.send-feedback').on('click', function() { ... });

JSFiddle の例。

これは実際にはボタンではなく<a>

その場合、クラスを使用できます。これは、現在行っていることのようなものだと思います。

HTML:

<a href="#" class="send-feedback disabled">Click</a>

JavaScript テキストエリアの長さチェック:

if( $(this).val().trim().length > 0 )
    $('.send-feedback').removeClass('disabled');
else
    $('.send-feedback').addClass('disabled');

JavaScript クリック機能:

$('.send-feedback').on('click', function(e) {
    e.preventDefault();
    if($(this).hasClass('disabled'))
        return;

    alert('Clicked!');
});

JSFiddle の例。

于 2013-03-28T10:56:27.927 に答える
2

すべてのキーアップ イベントでクリック イベントを再バインドしています。

.inactiveセレクターに追加してクリックをバインドする前に、ボタンが非アクティブであることを確認するようにコードを変更します。

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length){
        $('.send-feedback.inactive').removeClass('inactive').click(function(){
            console.log('clicked');
        });
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})

JSFiddle の例

于 2013-03-28T10:56:54.927 に答える
1

文字（キーアップ）を入力するたびに、イベント click を に追加します.send-feedback。

あなたがたくさん持っているなら.send-feedback、あなたは

(テキストエリアの文字数) * (.send-feedback の数)

「クリックされた」テキストが表示される回数。

.send-feedbackにクラス「非アクティブ」がある場合にのみ、クリック イベントを追加する必要があります。

ここ ：

$('textarea').bind({'keyup' : function(){
    if ($(this).val().trim().length) {
        if ($('.send-feedback').hasClass('inactive')){
            $('.send-feedback').removeClass('inactive').click(function(){
                console.log('clicked');
            });
        }
    } else {
        $('.send-feedback').addClass('inactive').off('click');
    }
}})
于 2013-03-28T10:57:07.850 に答える
0

私はあなたのためにこのフィドルを作成しました。

こんなふうになります：

var el = $(this);
var btn = $("#btnDoStuff");

if(el.val().length > 0)
    btn.prop("disabled", false);
else
    btn.prop("disabled", true);

問題を誤解していないことを願っています。

于 2013-03-28T11:06:30.733 に答える