如何使用jQuery在点击后禁用链接？

Question

我该如何使用jquery在点击链接后禁用它? 点击链接时，它会在一个具有唯一id的div内添加一个输入字段。我从变量中获取下拉框中的值。

  $(document).ready(function() {
        var count = 1;
        $(".block").on('click', function(){
            $("#textInput").append(
                '<div class="cgparent" id="input'+count+'">' +
                '<div class="col-md-8">' +
                '<input class="form-control"  type="text">' +
                '</div>' +
                '<div class="col-md-4">' +
                '<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
                '<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</div>' + '<br><br>' +
                '</div>'
            ).show();
            count++;
        });
    });



 <?php if ($table_name == "questions") {?>
                <div  class="dropdown" >
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
                        <span class="caret"></span>
                    </button>
                    <ul  class="dropdown-menu">
                        <?php
                        $question_fields = $this->db->list_fields('questions');
                        for ($i=0; $i<count($question_fields); $i++){?>
                            <li><a class="block" ><?php echo $question_fields[$i]?></li>
                        <?php } ?>
                    </ul>
                </div>
            <?php  } ?>

- Abid

Answer 1

如果您能接受添加一些CSS，这是我能找到的最简单的方法：

Javascript：

$(document).on('click', '#buttonSelector', function () {
    $(this).addClass('disabled');
});

CSS：

.disabled {
    /* if you also want it to fade a bit:  
       opacity: 0.5
    */
    pointer-events: none;
    cursor: default;
}

- Mirko Lugano

---

如果使用Bootstrap，即使没有添加CSS，这也可以正常工作。 - Christophe Hubert

Answer 2

我会通过设置一个计数器来实现。如果计数器大于零，那就意味着链接已被点击。

<a class="once-only" href="/do-stuff">Click me</a>

<script type="text/javascript">
$(document).ready(function ($) {
    var clicked = 0;
    $(document).on('click', '.once-only', function () {
        if (clicked != 0) {
            return false;
        }
        var clicked = clicked + 1;
    });
});
</script>

更新

The comments brought this solution:

<script type="text/javascript">
$(document).ready(function ($) {
    $(document).on('click', '.once-only', function () {
        ​$(this).contents().unwrap();​​
    });
});
</script>

以上代码将简单地移除锚点。

- Peter

---

你可以通过添加一个类并检查该类来更加简洁地完成此操作，这样它就可以在多个链接之间重复使用，而不需要为每个链接创建新的变量/处理程序。但原则是相同的。 - freedomn-m

@freedomn-m 那样做行不通。删除 once-only 后，它仍然会是一个链接。 - Peter

Answer 3

使用以下代码，一旦链接被点击就会将变量设置为 true。再次点击链接后，它将忽略点击。

$(document).ready(function() {
        var count = 1;
        var clicked = false;
        $(".block").on('click', function(e){
            if(clicked) {
                e.preventDefault();
            }
            clicked = true;
            $("#textInput").append(
                '<div class="cgparent" id="input'+count+'">' +
                '<div class="col-md-8">' +
                '<input class="form-control"  type="text">' +
                '</div>' +
                '<div class="col-md-4">' +
                '<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
                '<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                '</div>' + '<br><br>' +
                '</div>'
            ).show();
            count++;
        });
    });

- Bart Bergmans