好的，所以我设法让按钮从主视图加载下一个局部视图，但我对部分视图按钮的操作没有被击中，我已将所有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>
这是从上面调用的第2阶段代码，但我似乎无法在局部视图中点击此处的按钮。哪个加载到显示div。这是我想要的按钮
<button type="submit" id="backtoCart" class="btn">Back to Cart</button>
但是我在想。在这种情况下，功能可能不起作用任何人的想法
<!-- 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 好的建议由admam工作，但它立即关闭我的第一个div任何想法人
<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>
答案 0 :(得分：0)
你真的应该把你的脚本放在身体下方而不是头部。此外，如果您使用按钮引入局部视图，则需要在返回视图后定义单击侦听器。像这样......
$(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。
答案 1 :(得分：0)
使用开启而不是像这样的Click事件：
[
{
"id": 1,
"name": "Food",
"parent_id": 0,
"children": [
{
"id": 5,
"name": "Dry Food Items",
"parent_id": 1,
"children": [
{
"id": 11,
"name": "Local Dry Food Items",
"parent_id": 5
},
{
"id": 12,
"name": "Thai Dry Food Items",
"parent_id": 5
},
{
"id": 60,
"name": "Others",
"parent_id": 5
}
]
},
{
"id": 6,
"name": "Fruits",
"parent_id": 1
},
{
"id": 7,
"name": "LG Branded",
"parent_id": 1
},
{
"id": 8,
"name": "Meat",
"parent_id": 1
},
{
"id": 9,
"name": "Sea food",
"parent_id": 1
},
{
"id": 10,
"name": "Vegetables",
"parent_id": 1,
"children": [
{
"id": 14,
"name": "Local Vegetables",
"parent_id": 10
},
{
"id": 15,
"name": "Thai Vegetables",
"parent_id": 10
}
]
},
{
"id": 38,
"name": "Frozen",
"parent_id": 1
},
{
"id": 39,
"name": "IP Kitchen",
"parent_id": 1,
"children": [
{
"id": 40,
"name": "IP Meat",
"parent_id": 39
},
{
"id": 41,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 42,
"name": "IP Ingredients",
"parent_id": 39
},
{
"id": 43,
"name": "IP Sauce",
"parent_id": 39
},
{
"id": 44,
"name": "IP Seafood",
"parent_id": 39
},
{
"id": 45,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 46,
"name": "IP Desert",
"parent_id": 39
}
]
}
]
},
{
"id": 2,
"name": "Beverage",
"parent_id": 0,
"children": [
{
"id": 16,
"name": "Bar",
"parent_id": 2
},
{
"id": 17,
"name": "Coffee & Tea",
"parent_id": 2
},
{
"id": 18,
"name": "In Can",
"parent_id": 2
},
{
"id": 19,
"name": "Water",
"parent_id": 2
},
{
"id": 47,
"name": "IP Bar",
"parent_id": 2
}
]
},
{
"id": 3,
"name": "Disposable",
"parent_id": 0,
"children": [
{
"id": 21,
"name": "Disposable",
"parent_id": 3
}
]
},
{
"id": 4,
"name": "SOE",
"parent_id": 0,
"children": [
{
"id": 20,
"name": "Cleaning Materials",
"parent_id": 4
},
{
"id": 22,
"name": "Chinaware",
"parent_id": 4
}
]
}
];