Jquery 绑定事件不响应

Jquery Bind Events Don't Respond

提问人:jab 提问时间:8/10/2012 最后编辑:jab 更新时间:8/10/2012 访问量:283

问:

我试图在按下按钮时基本上增加和减少投票计数(我已经淡化了这种情况以利用我的错误);我将两个不同的按钮与点击事件绑定;但是,我无法从他们那里得到任何回应(用 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 的一个片段。

<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>
javascript jquery ruby-on-rails ruby unobtrusive-javascript

评论

0赞 PhD 8/10/2012
您还能发布 HTML 吗?
0赞 Gabe 8/10/2012
为什么同一个js文件中有两个事件?ready
0赞 jab 8/10/2012
我不知道,我最初有一个,但我一直在切换很多东西,试图从中获得任何功能。随意将其切换为更干净的格式。
0赞 MrOBrian 8/10/2012
你遇到任何错误吗?此外,它可能不会解决您的问题,但您不需要这样做,因为 id 是唯一的(只需 do ),并且您的变量是 jQuery 对象,但随后您这样做 ,这是不必要的。.closest('#current_vote')$('#current_vote')voting_element$(voting_element)
0赞 jab 8/10/2012
会编辑,从来没有机会实际执行里面的代码;)

答:

2赞 Brian Ustas 8/10/2012 #1

要指出正确的方向,请看一下这个演示

这是 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);
    });

});​

评论

0赞 jab 8/10/2012
因此,我使用绑定方法实际上是有原因的,我最终会将“click”事件更改为成功的ajax调用事件(因为该按钮通过ajax将JSON发送到服务器以更新新投票的数据库)。