1

2 つのアンカー タグがあります。

<a class="location" id="colorado" name="Colorado" href="#">co</a>
<a class="location" id="colorado" name="Colorado" href="#">co</a>

これらのいずれかがクリックされたときに、関数を一度だけ実行したい。jQuery で .one() を見てきましたが、これを機能させることができません。私がやってclick()いることは、ID 属性を取得し、それを変数に格納することです。次に、その変数を使用して入力フォームに入力しています。アンカータグは両方ともクラス「場所」を持っているため、関数は「場所」クラスのすべてのインスタンスに対してこれを行うようです。

$(document).ready( function() {

    $('.location').click(function() { //when any a tag with class of location is clicked...

        var clickedId = $(this).attr("id"); //set the ID attribute into var clickedID

        $("#addressInput").val(clickedId); //set value of this input field

        setTimeout( function() {    
            $("#addressSubmit").click(); //submit the form after 1 second of the initial click    
        }, 1000); 

    });     
});

これを設定して、場所のクラスを持つアンカータグをクリックするといつでも機能しますが、「場所」のクラスを持つすべてのものに対して繰り返されるわけではありませんか?

4

4 に答える 4

3

.one()を使用します。

$('.location').one('click',function() { //when any a tag with class of location is clicked...

    var clickedId = $(this).attr("id"); //set the ID attribute into var clickedID

    $("#addressInput").val(clickedId); //set value of this input field

    setTimeout( function() {    
        $("#addressSubmit").click(); //submit the form after 1 second of the initial click    
    }, 1000); 

});

サイトの説明によると、「要素のイベントにハンドラーをアタッチします。ハンドラーは、イベントの種類ごとに要素ごとに最大 1 回実行されます。」

編集：一度だけ実行したいですか？

$('.location').on('click',function() {        
    // set value of this input field, and 
    document.getElementById('addressInput').value = this.id;

    // remove click handlers
    $('.location').off('click');

    // submit the form after 1 second delay
    setTimeout( function() {    
        document.getElementById('addressSubmit').submit();
    }, 1000); 
});

これにより、最初の実行時にクリック イベントが削除されます。また、de-jQuery を少し自由に使用しました...実行しているすべての機能は、純粋な JS で簡単に実行できます。また、クリックイベントをトリガーしてフォームを送信するように変更しました...それがあなたがそこでやろうとしていたことだと思います。

jsFiddle が提供します。

于 2013-10-16T19:00:29.643 に答える
0

最初に気付いた問題は、同じ ID を持つ 2 つのアイテムがあることです。2 番目のタグの ID を変更してください。one() が機能しない場合は、これを試してください。

<script type="text/javascript">
$(document).ready( function() {

    // Bind to the click event
    $('.location').on('click', function() { //when any a tag with class of location is clicked...

        var clickedId = $(this).attr("id"); //set the ID attribute into var clickedID

        $("#addressInput").val(clickedId); //set value of this input field

        // Unbind the event
        $('.location').off('click');

        setTimeout( function() { 

            $("#addressSubmit").click(); //submit the form after 1 second of the initial click

        }, 1000); 

    });


});</script>
于 2013-10-16T19:02:45.847 に答える