0

我正在开发一个允许用户喜欢一个项目（比如一个项目）的网站。该事件由 jQuery 和 AJAX 处理。item 数组包含相当多的项目，每个项目都有一个“爱”按钮。我决定通过将一个表单放在页面底部并远程提交来有效地减少页面上的表单数量。

所以每次用户点击love按钮时，保存item id的data属性就会被放入表单中，并提交表单。简单的东西。

但我发现数据响应有点复杂，因为我不知道如何找到要更新的项目的元素 ID。我不能只使用this或event.target因为它在不同的事件中。我也尝试将event参数携带到 中submit event，但没有奏效。

  $(".love_item").click (event) ->
    $(".love_item_item_id").val $(this).data 'id'
    $(".love_item_form").submit()
    $(this).hide(200)

  $("form.love_item_form").submit (evt) ->
     evt.preventDefault()
     $form = $ @
     $form.find(':submit').prop 'disabled', true
     $.post($form.attr('action'), $form.serializeArray(), type: 'json').done (data) ->
       $(event.target).parent().find(".item_info_box").html data

最后一行，它说event.target的是据我所知。很明显，这个变量没有被携带，但我真的不知道该放什么来实现我的目标。另外，我知道我可以通过表单操作传递其他参数（换句话说，将它们发送到 rails 控制器并返回），但我宁愿不这样做。有任何想法吗？

4

3 回答 3

2

您根本不需要任意形式。像这样的东西会起作用：

示例标记（注意 data 属性）：

<a href="#" data-id="2" class="likeable">Item to like</a>

jQuery：

$('a.likeable').on('click', function() {
    var $item = $(this);
    var id = $item.data('id');

    $.post('url/like/' + id, function() {
      // success
      // do something with $item here.
    });
});
于 2013-01-15T18:51:04.320 回答
1

如果你有这样的元素：<div id="foo" data-id="foo1234">Foo</div>

您可以像这样在您的 ajax 帖子之后选择它，假设您仍然具有以下 ID foo1234：

$('[data-id="' + id  + '"]').doSomething();
于 2013-01-15T18:49:42.040 回答
1

只需使用 jQuery 的 ajax 功能

$('.love_item').on('click', function(e) {

  $.ajax({
    type: 'POST',
    url: *insert url here*,
    data: 'id=' + e.currentTarget.data-id,
    success: function(response) {

      var element = e.currentTarget;

      // do whatever
    }
  })
});
于 2013-01-15T18:56:43.983 回答