无法使用jquery访问部分视图按钮_Jquery_Asp.net Core

无法使用jquery访问部分视图按钮

jquery asp.net-core

无法使用jquery访问部分视图按钮,jquery,asp.net-core,Jquery,Asp.net Core,好的，所以我设法让按钮从主视图加载下一个局部视图，但是我对局部视图按钮的操作根本没有被点击，我已经在主布局文件中包含了所有jquery <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <environment names="Development"> <link rel="st

好的，所以我设法让按钮从主视图加载下一个局部视图，但是我对局部视图按钮的操作根本没有被点击，我已经在主布局文件中包含了所有jquery

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
        <link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="~/css/form-elements.css">
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
        <link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="~/css/form-elements.css">
    </environment>

    <script>
          $(document).ready(function () {
              $("#checkout").click(function () {

                   $.get('@Url.Action("LoadStage2", "Basket")', {}, function (response) {
                       $("#Display1").html(response);                    
                       $('#cart').slideUp();
    });
              });

          });
    </script>
    <script>
             $(document).ready(function () {
                 $("#backtoCart").click(function () {

                   $.get('@Url.Action("LoadStage2", "Cart")', {}, function (response) {
                       $("#Display").html(response);
                       $('#cart').slideUp();
    });
              });

          });

    </script>


</head>
<body>
    <div id="logo" class="logo">


    </div>

    <div class="container">
        <div class="row form-group">
            <div class="col-xs-12">
                <ul class="nav nav-pills nav-justified thumbnail setup-panel">
                    <li class="active">
                        <a href="#step-1">
                            <h4 class="list-group-item-heading">1. Cart</h4>
                            <p class="list-group-item-text">Final Cart</p>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#step-2">
                            <h4 class="list-group-item-heading">2. Login</h4>
                            <p class="list-group-item-text">Account Login / Creation</p>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#step-3">
                            <h4 class="list-group-item-heading">3. Your Details</h4>
                            <p class="list-group-item-text">Third step description</p>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#step-3">
                            <h4 class="list-group-item-heading">4. Payment Details</h4>
                            <p class="list-group-item-text">Credit card,direct debit, paypal.</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div class="row setup-content" id="step-1">

            <div id="Display1"></div>
                   @Html.Partial("/Views/Basket/Cart.cshtml")

        </div>
        <div class="row setup-content" id="step-2">

                    <div id="Display"></div>

        </div>

        @RenderBody()

</body>


$（文档）.ready（函数（）{
$（“#签出”）。单击（函数（）{
$.get（'@Url.Action（“LoadStage2”，“Basket”），{}，函数（响应）{
$（“#Display1”）.html（响应）；
$（“#购物车”）.slideUp（）；
});
});
});
$（文档）.ready（函数（）{
$（“#backtoCart”）。单击（函数（）{
$.get（'@Url.Action（“LoadStage2”，“Cart”），{}，函数（响应）{
$（“#显示”）.html（响应）；
$（“#购物车”）.slideUp（）；
});
});
});










@Html.Partial（“/Views/Basket/Cart.cshtml”）
@RenderBody（）

这是从上面调用的第2阶段代码，但我似乎无法在局部视图中点击这里的按钮。这是加载到display div中的。这是我想要访问的按钮

返回购物车

但我在想，ready函数在这种情况下可能不起作用，任何人的想法

<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">


            <div class="row">
                <div class="col-sm-5">

                    <div class="form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>Login to our site</h3>
                                <p>Enter username and password to log on:</p>
                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-key"></i>
                            </div>
                        </div>
                        <div class="form-bottom">
                            <form role="form" action="" method="post" class="login-form">
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">Username</label>
                                    <input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
                                </div>
                                <button type="submit" class="btn">Sign in!</button>
                            </form>
                        </div>
                    </div>

                    <div class="social-login">
                        <h3>...or login with:</h3>
                        <div class="social-login-buttons">
                            <a class="btn btn-link-1 btn-link-1-facebook" href="#">
                                <i class="fa fa-facebook"></i> Facebook
                            </a>
                            <a class="btn btn-link-1 btn-link-1-twitter" href="#">
                                <i class="fa fa-twitter"></i> Twitter
                            </a>
                            <a class="btn btn-link-1 btn-link-1-google-plus" href="#">
                                <i class="fa fa-google-plus"></i> Google Plus
                            </a>
                        </div>
                    </div>
                    <button type="submit" id="backtoCart" class="btn">Back to Cart</button>
                </div>

                <div class="col-sm-1 middle-border"></div>
                <div class="col-sm-1"></div>

                <div class="col-sm-5">

                    <div class="form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>Sign up now</h3>
                                <p>Fill in the form below to get instant access:</p>
                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-pencil"></i>
                            </div>
                        </div>
                        <div class="form-bottom">
                            <form role="form" action="" method="post" class="registration-form">
                                <div class="form-group">
                                    <label class="sr-only" for="form-first-name">First name</label>
                                    <input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-last-name">Last name</label>
                                    <input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-email">Email</label>
                                    <input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-about-yourself">About yourself</label>
                                    <textarea name="form-about-yourself" placeholder="About yourself..."
                                              class="form-about-yourself form-control" id="form-about-yourself"></textarea>
                                </div>

                                <button type="submit" class="btn">Sign me up!</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>


登录我们的网站
输入要登录的用户名和密码：
用户名
密码
登录！
…或通过以下方式登录：
返回购物车
现在就报名吧
填写下表以获得即时访问：
名字
姓
电子邮件
关于你自己
给我报名！

编辑2 好的，Adam的Suggesiton正在工作，但它马上就要结束我的第一个节目了，有什么想法吗

 <script>
 $("#checkout").click(function () {

       $.get('@Url.Action("LogInRegister", "Basket")', {}, function (response) {
           $("#Display1").html(response);
           $('#Display1').hide() 
        $('#Display').slideUp();
    //Bind now that #backtoCart exists in DOM
    $("#backtoCart").click(function () {
    $.get('@Url.Action("Cart", "Basket")', {}, function (response) {
    $("#Display").html(response);
    $('#cart').slideUp();
    });

    $('#Display').slideUp();
    });
    });
    });</script>


$（“#签出”）。单击（函数（）{
$.get（'@Url.Action（“LogInRegister”，“Basket”），{}，函数（响应）{
$（“#Display1”）.html（响应）；
$（'#Display1'）.hide（）
$（“#显示”）.slideUp（）；
//现在绑定，因为DOM中存在backtoCart
$（“#backtoCart”）。单击（函数（）{
$.get（'@Url.Action（“购物车”、“购物篮”），{}，函数（响应）{
$（“#显示”）.html（响应）；
$（“#购物车”）.slideUp（）；
});
$（“#显示”）.slideUp（）；
});
});
});

你真的应该把脚本放在身体下面，而不是脑袋里。此外，如果要使用按钮引入局部视图，则需要在返回视图后定义单击侦听器。像这样的

$(document).ready(function () {
     $("#checkout").click(function () {

           $.get('@Url.Action("LoadStage2", "Basket")', {}, function (response) {
                $("#Display1").html(response);   

                //Bind now that #backtoCart exists in DOM
                $("#backtoCart").click(function () {
                     $.get('@Url.Action("LoadStage2", "Cart")', {}, function (response) {
                     $("#Display").html(response);
                     $('#cart').slideUp();
                });

                $('#cart').slideUp();
           });
     });
});

在DOM中存在HTML之前，您无法实际绑定单击事件。

使用On而不是像这样的单击事件：

$("#Display1").on("click","#backtoCart",function(){
        $.get('@Url.Action("LoadStage2", "Cart")', {}, function (response) {
        $("#Display").html(response);
        $('#cart').slideUp();

});

您的函数可以工作，但它没有关闭原来的basket div？当我点击“结帐”按钮时，你有什么想法吗？它工作得很好，是的，很好的一点是，body标签的底部能够找到它。它不会自动完成，你必须瞄准原始篮子的顶部div并执行$（“#SomeDiv”）.hide（）在上面。请看编辑2，但如果我这样做，它会立即关闭我的第一个div。我还注意到，签出按钮在第二次查看代码时不起作用，

$("#Display1").on("click","#backtoCart",function(){
        $.get('@Url.Action("LoadStage2", "Cart")', {}, function (response) {
        $("#Display").html(response);
        $('#cart').slideUp();

});