jquery 具有相同 ID 的多个输入的按键功能

Question

大家好我有一个问题这是我的 jquery 代码

<script type="text/javascript">
    $('#com').keypress(function (event) {
        var comm = $(this).val();

        var keycode = (event.keycode ? event.keycode : event.which);
        if (keycode == 13) {
            var comm = $("#com").val();
            alert(comm);
            var hidid = $("#hidid").val();
            alert(hidid);

            $.ajax({
                cache: false,
                type: "POST",
                url: "/Home/postComment",
                datatype: "json",
                data: { comment: comm, hidid: hidid },
                error: function () {
                    alert("error ");
                },
                success: function () {
                    window.location.href = "/Home/Index";
                }
            });
        }
        event.stopPropagation();
    });
</script>

我在控制器中这样调用它

[HttpPost]
    public JsonResult postComment(string comment,int hidid)
    {
        Repository<whichOne> _rwo = new Repository<whichOne>();
        Repository<Comment> _rc = new Repository<Comment>();

        int _userId = Convert.ToInt32(Session["_userId"]);

        Comment _comment = new Comment
        {
            userId = _userId,
            comment = comment,
            createDate = DateTime.Now,
            isValid = true,
            whichOneId = hidid,
        };

        _rc.Add(_comment);
        _rc.Save();

        return Json(new { success = true });
    }

我有来自数据库的数据，我正在尝试获取我的数据的 ID，并从输入

中对 post 发表评论

@foreach (var item in Model._mywhichOneHelper)
                {
          @Html.Hidden("hidid",@item.id)
          <input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">}

然而，当我在写完一些东西后按下回车键时，我只能到达第一个数据。 Keypress 不适用于其他数据我该怎么办？

如您所见，当我编写并单击 Enter 进行首次输入时，它可以正常工作，但是当我对其他数据尝试此操作时，没有任何反应。非常感谢。

Answer 1

这里的问题是你的 jQuery select 或者只是找到第一个元素，因为它只期望一个元素有一个 id（id 应该是唯一的）。

让多个元素具有相同的 ID 不是一个好的做法 - 这是您的问题的一部分。如果您可以重新设计您的标记，使元素具有唯一的 id，但共享 class（例如 class="com"），那么您可以轻松地编写 jQuery select 或者找到它们。在这种情况下，仍然有一个解决方法，您可以使用 jQuery select 或者像这样： [id=com] 而不是 #com 并且这将找到所有匹配的元素而不是只寻找一个具有该唯一 ID 的（预期的）元素。

另请注意，我必须更改您的事件处理程序，以便它不使用另一个 jQuery select 或者，而是将值 $self 传递到闭包中，以便它保持正确的唯一实例而不是总是找到第一个。

$(function() {
  $("[id=com]").keypress(function(event) {
      var $self = $(this);
      var comm = $self.val();

      var keycode = (event.keycode ? event.keycode : event.which);
      if (keycode == 13) {
        var comm = $self.val();
        alert(comm);
        event.stopPropagation();
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control" id="com" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />

更好的方法是使用唯一 ID，并通过 class select，像这样：

$(function() {
  $(".com").keypress(function(event) {
    var $self = $(this);
    var comm = $self.val();

    var keycode = (event.keycode ? event.keycode : event.which);
    if (keycode == 13) {
      var comm = $self.val();
      alert(comm);
      event.stopPropagation();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" class="pull-left input-sm form-control com" id="com1" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control com" id="com2" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />
<input type="text" class="pull-left input-sm form-control com" id="com3" name="comments" style="border-radius: 12px;" placeholder="Your Comments...">
<br />

jquery 具有相同 ID 的多个输入的按键功能

jquery keypress function with multiple input with same id

javascript

jquery

asp.net-mvc-4

keypress