Question

我有一个生成表格的剃刀页面，我想打开一个对话框，并在单击行图像时插入注释。该表此时有5行。

以下是tbody标签内的修订代码：

  <tbody>
    @for (int i = 0; i < 5; i++)
    {
      string dropDownAccountName = "dropDownAccountsR" + CasWtsUI.Utility.PadWithZero(@i.ToString(), 3);
      string dropDownPayType = "dropDownPayTypesR" + CasWtsUI.Utility.PadWithZero(@i.ToString(), 3);
      string showComment = "showCommentR" + CasWtsUI.Utility.PadWithZero(@i.ToString(), 3);
      string openComment = "openCommentR" + CasWtsUI.Utility.PadWithZero(@i.ToString(), 3);
      string aComment = "aCommentR" + CasWtsUI.Utility.PadWithZero(@i.ToString(), 3);
      <tr style="background-color: #ffffff; padding-left: 5px; height: 14pt">
        <td id="commentContainer" align="center">
          <a id="@showComment" name="@showComment" class="showComment" href="#">
            <img src='@Url.Content("~/Content/Images/NotepadIcon.jpg")' height="20px" width="20px" style="border:none; text-decoration:none"
       alt="Add a Comment for this Account" /></a>
        </td>
        <td align="left">
          <select id="@dropDownAccountName" name="@dropDownAccountName" style="font-size:9pt; width:120px">
            @foreach (CasWtsUI.AccountTitle accountTitle in Model.Accounts)
            {
              <option value="@accountTitle.ID">@accountTitle.Title</option>
            }
          </select>
        </td>
        <td align="left">
          <select id="@dropDownPayType" name="@dropDownPayType" style="font-size:9pt; width:90px" >
            @foreach (CASCommon.PayType payType in Model.PayTypes)
            {
              <option value="@payType.ID">@payType.Type</option>
            }
          </select>
        </td>
        @for (int dayOffset = 0; dayOffset < inputDays; dayOffset++)
        {
          System.DateTime entryDate = firstDate.AddDays(dayOffset);
          string textBoxHours = "textBoxHoursR" +
            CasWtsUI.Utility.PadWithZero(@i.ToString(), 3) + "D" +
            CasWtsUI.Utility.PadWithZero(entryDate.Year.ToString(), 4) +
            CasWtsUI.Utility.PadWithZero(entryDate.Month.ToString(), 2) +
            CasWtsUI.Utility.PadWithZero(entryDate.Day.ToString(), 2);
          <td align="center" style="width: 70px; font-size: 9pt">
            @{string theDay = entryDate.DayOfWeek.ToString();
              var backColor = "#ffffff"; }
            @if (theDay == "Saturday" || theDay == "Sunday")
            {
              backColor = "#f0f0f2";
            }
            <input type="text" id="@textBoxHours" name="@textBoxHours" style="width: 0.35in; background-color: @backColor"  />
          </td>
        }
      </tr>
      <tr>
            <td id="@openComment" class="showComment" colspan="20" style="text-align: left; padding-left: 40px;
              width: 500px; display: none">
              Enter a Comment about this account:&nbsp;&nbsp;&nbsp;&nbsp;
          <input id="@aComment" name="@aComment" type="textbox" size="120" style="color:blue; background-color:#f0f0f2" />
        </td>
      </tr>

    }
  </tbody>

这是我的点击功能

<script src='@Url.Content("~/Scripts/jquery-ui-1.8.17.custom.min.js")' type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $(".showComment").click(function (e) {
      $('#openComment').toggle('fade');
    });
  });
</script>

Answer 1

我看到的第一个问题是您尝试将点击事件绑定到#showComment。查看正在呈现的HTML，ID可能如下所示：#showCommentR001，这就是您的点击事件未触发的原因。相反，你会想要这样的东西：

$(document).ready(function() {
    var $commentDialog = $("#Comment");
    $(".showComment").click(function() {
        $commentDialog.dialog("open");
    });

    $commentDialog.dialog({
        autoOpen: false,
        show: "fadeIn",
        modal: true
    });
});

这是fiddle，应该与您在视图中输出的内容类似。

如何使用剃刀生成的Id调用jQuery函数？

1 个答案: