使用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  } ?>

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

Answer 2

单击链接后，使用以下代码将变量设置为 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++;
        });
    });

Answer 3

我会通过设置一个计数器来做到这一点。如果计数器大于零，则表示该链接已被点击。

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

以上将简单地删除锚。