Question

我尝试从按钮调用js函数。我不想使用'onclick'属性，所以我尝试使用.click方法。但是，函数永远不会调用。

index.cshtml

@model List<WebApplication3.Models.Vehicules>
@{
    ViewBag.Title = "Home Page";
}


<div class="col-sm-9 col-md-9">
    <script src="~/Scripts/jquery-1.12.1.min.js" type="text/javascript" >
</script>
    <script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <link href="~/Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/Fonction/FonctionOnLaod.js" type="text/javascript"></script>
    <script src="~/Scripts/Fonction/FunctionVehicule.js" type="text/javascript"></script>
    <script>
    </script>
    <div class="container">
        <div class="row">


            <div class="col-md-12">




                <h4>Bootstrap Snipp for Datatable</h4>
                <div class="table-responsive" id="TableVehicule" onload="scope(); load_events(); date()">

                    <!-- Emplacement du tableau -->

                </div>

            </div>
        </div>
    </div>

    <!-- Modal -->

    @Html.Partial("Modal/ModalVehicule")
</div>

button.cshtml（partialview）

@model List<WebApplication3.Models.Vehicules>
<table class="table table-bordred table-striped">

    <thead>
        <tr>

            <th><input type="checkbox" id="checkall" /></th>
            <th>Immatriculation</th>
            <th>Marque</th>
            <th>Model</th>
            <th>Designation</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>

    </thead>
</table>
<table id="CustomerGrid" class="table table-bordred table-striped">
    <tbody>

        @foreach (var vehicule in Model)
        {
            <tr>
                <td><input type="checkbox" class="checkthis" /></td>
                <td>@vehicule.immat</td>
                <td>@vehicule.marque</td>
                <td>@vehicule.modele</td>
                <td>@vehicule.Designation</td>
                <td>
                    <a class="details" href="javascript:;">
                        <label class="button" for="dialog_state">
                            <p data-placement="top" data-toggle="tooltip" title="Edit">
                                <!-- the button I want to launch th .click -->
                                <button class="btn btn-primary btn-xs IDC-Edit" data-title="Edit"  data-toggle="modal" data-target="#myModal" id="IDC-Edit" >
                                    <span class="glyphicon glyphicon-pencil">

                                    </span>
                                </button>
                            </p>
                        </label>
                    </a>
                </td>
                <td>
                    <p data-placement="top" data-toggle="tooltip" title="Delete">
                        <button class="btn btn-danger btn-xs IDC-Delete" data-title="Delete" data-toggle="modal" data-target="#myModal" id="@(vehicule.id_vehicule )">
                            <span class="glyphicon glyphicon-trash">

                            </span>
                        </button>
                    </p>
                </td>

            </tr>
        }
    </tbody>
</table>

Function.js

$(document).ready(function () {
    $("#IDC-Edit").click(function () {
        console.log("test");
    });
});

当我启动项目时，一切正常，但是当我点击按钮时，我从未在控制台上看到“测试”

Answer 1

改为使用它。

$(document).ready(function () {
    $(".IDC-Edit").click(function () {
        console.log("test");
    });
});

您有多个具有相同ID IDC-Edit的按钮，因此您必须通过类ID调用它们。

请在此处查看此链接以了解ID和类别的说明。 https://jsfiddle.net/jefm9t4d/3/

Answer 2

您的代码是有效的，因为您使用类标识符来捕获click事件我认为代码必须是这样的，请检查

$(document).ready(function () {
    $(".IDC-Edit").click(function () {
        console.log("test");
    });
});

函数.click在ASP.NET

2 个答案: