Question

我有两个锚标记：

<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); 

    });     
});

我如何设置它以便在我点击具有位置类的锚标记的任何时候它都可以工作但是对于所有具有“位置”类的东西都不会重复？

Answer 1

使用.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); 

});

根据站点描述：“将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。”

编辑：你只想跑一次，嗯？

$('.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); 
});

这将删除第一次运行时的click事件。我也冒昧地使用de-jQuerying ...你运行的所有函数都可以在纯JS中轻松完成。我还改变了你触发点击事件只是提交表单......我认为这就是你想要做的事情。

jsFiddle provided

Answer 2

使用您的代码，它将是

$(document).ready( function() {
    var locations =$('.location');
    locations.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
        locations.off('click'); //remove the rest of the handlers
        setTimeout( function() {    
            $("#addressSubmit").click(); //submit the form after 1 second of the initial click    
        }, 1000); 

    });     
});

尽管使用委托样式（带有3个参数）在.location的容器上使用on / off会更清晰

Answer 3

我注意到的第一个问题是你有两个具有相同id的项目，更改第二个标签的id。如果一个（）不起作用，请尝试这个。

<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>

Answer 4

如果我理解正确，你想在点击第一个按钮时运行该功能，然后再也不用，无论点击哪个按钮？有更优雅的解决方案，但简单的方法是使用简单的标志：

$(document).ready( function() {
    flag = true;
    $('.location').click(function() { //when any a tag with class of location is clicked...
        if(!flag) return;
        flag = false;

        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); 

    });     
});

jQuery - 运行一次函数

4 个答案: