对绑定到类的单击事件使用上下文答案

【问题标题】：Using context for a click event bound to a class对绑定到类的单击事件使用上下文
【发布时间】：2013-03-20 19:44:26
【问题描述】：

对于我正在开发的 MVC 应用程序，我有一个可以填充多个子视图的视图，如下所示：

部分视图

@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 和 MVC3。问题（可能是一个愚蠢的问题，但我们会看到）：我的个人添加项目链接如何使用呈现它们的部分上下文进行操作？

【问题讨论】：

在这里使用编辑器模板而不是部分可能更有意义
不管怎样，我还是需要根据上下文进行操作。如何呈现上下文的载体不应该重要。

标签： c# javascript jquery asp.net-mvc-3

【解决方案1】：

您确实意识到在页面完全呈现后没有隔离，例如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 

    });

【讨论】：