使用绑定到类的单击事件的上下文
本文关键字:单击 上下文 事件 绑定 | 更新日期: 2023-09-27 18:04:51
对于我正在开发的MVC应用程序,我有一个可以填充许多子视图的视图,如:
Some View Partial
@model SuperFoo
<!-- snip unimportant details... ->
@foreach(var current in Model.Items)
{
@Html.Partial('_Item', current);
}
<!-- ...SNIP more useless details... -->
<script>
$(document).ready(function () {
$('.add-item').click(function () {
// Make some AJAX call to do something.
});
});
</script>
单项部分
@model Foo
<div class='some-styling'>
@Html.HiddenFor(m => m.Name)
@Html.HiddenFor(m => m.PropA)
@Html.HiddenFor(m => m.PropN)
<input type='text' value='' />
<a href='javascript:;' class='no-line add-item'>Add To Cart</a>
</div>
我想弄清楚两件事:
A)我如何确保只有我点击的特定按钮触发它的事件,和
B)如何使用特定于特定项的信息?如果你注意到,我在我的项目级别视图中有一个可编辑的输入字段。当触发单击时,生成的AJAX调用需要使用该文本框中的值(这是简单的部分,$('selector').val()
)
我只使用jQuery和mvc。问题(可能是一个愚蠢的问题,但我们将看到):我的单个Add Item链接如何使用呈现它们的部分的上下文进行操作?
你确实意识到,在页面完全呈现后,没有隔离,如partial view
,这只是为了管理你的代码,我还没有完全掌握你的问题,但我会尝试
A的答案
$('.add-item).click(function (e) {
e.preventDefault();// prevent the default behavior of the anchor
this; //is your friend, it will give you the DOM element which is clicked
$(this); // will give you the nicely wrapped jQuery object
});
对B的回答
如何使用特定于为特定项目获得的信息的信息?
不知道你在问什么,但是如果你像
那样包装你的项目<div class="item-wrap">
<input type='text' value='10'/>
<a href=#' class='no-line add-item'>Add To Cart</a>
</div>
<div class="item-wrap">
<input type='text' value='20'/>
<a href='#' class='no-line add-item'>Add To Cart</a>
</div>
然后在点击处理程序
$('.add-item).click(function () {
var $this = $(this);
var $val = $this.closest(':input').val();
//will give you 20 or 30 depending upon which one you click
//or
var $$val = $this.closest('.item-wrap>:input').val();
//you can write a variety of selectors which can vary in perf
});