0

我試圖基本上增加和減少按鈕按下時的投票計數(我已經愚弄了情況,以利用我的錯誤);我通過點擊事件綁定了兩個不同的按鈕;但是,我無法獲得任何響應(使用Firebug進行測試)。jquery綁定事件不回答

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的導軌=> 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> 
+0

能否請您也發佈HTML? – PhD 2012-08-09 20:59:27

+0

爲什麼在同一個js文件中有兩個'ready'事件? – Gabe 2012-08-09 21:00:51

+0

我不知道,我原來有一個,但我一直在切換很多東西,試圖從中獲得任何功能。隨意將其切換爲更清晰的格式。 – jab 2012-08-09 21:05:07

回答

2

爲了指出正確的方向,看看這個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); 
    }); 

});​ 
+0

所以實際上有一個原因,爲什麼我使用綁定方法,我最終將'click'事件更改爲成功的ajax調用(因爲該按鈕通過Ajax將JSON發送到服務器以更新新投票的數據庫)。 – jab 2012-08-09 21:29:31

+0

Gotcha,更新了帖子和演示。 – 2012-08-09 21:39:42