jquery - 如何在 jQuery 中从 MVC View Foreach 使用 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>