Jquery 绑定事件不响应答案

【问题标题】：Jquery Bind Events Don't RespondJquery 绑定事件不响应
【发布时间】：2012-08-07 04:11:40
【问题描述】：

我试图在按下按钮时增加和减少投票计数（我已经简化了情况以利用我的错误）；我用点击事件绑定了两个不同的按钮；但是，我没有得到任何响应（用 Firebug 测试）。

jQuery 代码：

//This Code is located within Application.js (Rails)
$(document).ready(function() {
    $('.buttonUp').bind('click', function() {
        var voting_element = $(this).closest('.current_vote');
        voting_element.text( Number(voting_element.text()) + 1 );
    });
    $('.buttonDown').bind('click', function() {
        var voting_element = $(this).closest('.current_vote');
        voting_element.text( Number(voting_element.text()) - 1 );
    });
});

每个具有 buttonUp 或 buttonDown 类的按钮都位于包含单个提交按钮的表单中。

我在 Rails 3.1.3 中执行此操作并使用以下版本的 Jquery 库：

Jquery-Rails => 1.0.12
jQuery => 1.6.1
JqueryUI => 1.8.12
JqueryUJS => 上面 Jquery-Rails 自带的那个。

Live 也不起作用，我没想到会这样，因为我在将方法绑定到按钮之前等待文档加载。

这是相关 HTML 的 sn-p。

<tr>
    <td>pop</td>
    <td>pop</td>
    <td><a href="/posts/12">Show</a></td>
    <td><a href="/posts/12/edit">Edit</a></td>
    <td><a href="/posts/12" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Destroy</a></td>
    <td><p>
      <b>votes: </b>
    </p>
      <p class="current_vote">
        1
      </p>
      <form action="/posts/increaseVote?id=12" class="button_to" data-remote="true" data-type="json" method="post"><div><input class="buttonUp" type="submit" value="increaseVote" /><input name="authenticity_token" type="hidden" value="TxEGwONzSD+tnJ19iHMdGjuCBJMFoNJdECEspDtZxxY=" /></div></form>
      <form action="/posts/decreaseVote?id=12" class="button_to" data-remote="true" data-type="json" method="post"><div><input class="buttonDown" type="submit" value="decreaseVote" /><input name="authenticity_token" type="hidden" value="TxEGwONzSD+tnJ19iHMdGjuCBJMFoNJdECEspDtZxxY=" /></div></form>
  </tr>

【问题讨论】：

能否请您也发布 HTML？
为什么同一个js文件中有两个ready事件？
我不知道，我最初有一个，但我一直在切换很多东西以尝试从中获得任何功能。随意将其切换为更清晰的格式。
您是否遇到任何错误？此外，它可能无法解决您的问题，但您不需要执行 .closest('#current_vote')，因为 id 是唯一的（只需执行 $('#current_vote')）并且您的 voting_element 变量是一个 jQuery 对象，但随后您执行 @987654327 @，这是不必要的。
将编辑，从未有机会实际执行里面的代码；）

标签： javascript jquery ruby-on-rails ruby unobtrusive-javascript

【解决方案1】：

要指明正确的方向，请查看此DEMO。

这是 JS：

$(document).ready(function() {

    function vote(el, amt) {
        var $counter = $(el).siblings('.counter');
        $counter.text(parseInt($counter.text(), 10) + amt);
    }

    $('.voteUp').bind('click', function() {
        vote(this, 1);
    });

    $('.voteDown').bind('click', function() {
        vote(this, -1);
    });

});

【讨论】：

所以实际上我使用绑定方法是有原因的，我最终会将 'click' 事件更改为成功的 ajax 调用事件（因为按钮通过 ajax 将 JSON 发送到服务器更新新投票的数据库）。