如何在MVC View Foreach的jQuery中使用OnClick函数

Question

我对使用foreach的jQuery onClick函数有一个问题.(我是jQuery的新手.)

<table>
  <th>CityName</th>
  <th>CityId</th>
  @foreach (var item in Model.Adress)
  {   
    <tr>
      <td>
        <div onClick(cityDetail(@item.CityId, @item.cityName))>@CityId</div>
      </td>
      <td>
        <div>@CityName</div>
      </td>
    </tr>
  }
</table>

<script> 
  function cityDetail(cityId, cityName) {
    //do something
  }
</script>

我的问题是,我怎样才能用jQuery做到这一点？ onClick(cityDetail(@item.CityId,@item.cityName).我想使用foreach并将点击的多个参数传递给jQuery.

非常感谢您的回答.

Answer 1

避免所有on*事件属性通常是一个好主意,因为它将HTML和JS代码紧密地联系在一起.相反,使用不显眼的Javascript附加事件处理程序.您可以通过循环中创建的元素的属性将CityId和CityName值传递给事件处理程序data.

另请注意,您的HTML存在一些问题,例如<tr>周围的数据丢失th,以及下方数据的错误顺序列标题.

尽管如此,试试这个:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $('.city').click(function() {
      var $city = $(this);
      cityDetail($city.data('city-id'), $city.data('city-name'));
    });
  });
</script>
<table>
  <tr>
    <th>City Id</th>
    <th>City Name</th>
  </tr>
  @foreach (var item in Model.Adress) {
    <tr>
      <td>
        <div class="city" data-city-id="@item.CityId" data-city-name="@item.cityName">@item.CityId</div>
      </td>
      <td>
        <div>@item.cityName</div>
      </td>
    </tr>
  }
</table>