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：

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

CSS：

{{1}}

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>

以上只会移除锚点。

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

如何使用jquery单击一次后禁用链接

3 个答案:

更新