2013-02-18 302 views
-2

我在嘗試從我的頁面上的多個圖像調用JQuery函數時遇到了一些麻煩。如果有人能幫助我,這將是偉大的。多個圖像點擊JQuery

這是我的代碼:

HTML

 <input type="image" name="rateButton[1]" src="img/Rate1.png" height="40" width="40" value="1" onclick="rateBox(1)"/> 
     <input type="image" name="rateButton[2]" src="img/Rate2.png" height="40" width="40" value="1" onclick="rateBox(2)"/> 
     <input type="image" name="rateButton[3]" src="img/Rate3.png" height="40" width="40" value="1" onclick="rateBox(3)"/> 
     <input type="image" name="rateButton[4]" src="img/Rate4.png" height="40" width="40" value="1" onclick="rateBox(4)"/> 
     <input type="image" name="rateButton[5]" src="img/Rate5.png" height="40" width="40" value="1" onclick="rateBox(5)"/> 
     <input type="image" name="rateButton[6]" src="img/Rate6.png" height="40" width="40" value="1" onclick="rateBox(6)"/> 
     <input type="image" name="rateButton[7]" src="img/Rate7.png" height="40" width="40" value="1" onclick="rateBox(7)"/> 
     <input type="image" name="rateButton[8]" src="img/Rate8.png" height="40" width="40" value="1" onclick="rateBox(8)"/> 
     <input type="image" name="rateButton[9]" src="img/Rate9.png" height="40" width="40" value="1" onclick="rateBox(9)"/> 
     <input type="image" name="rateButton[10]" src="img/Rate10.png" height="40" width="40" value="1" onclick="rateBox(10)"/><br> 

JQuery的

$(document).ready(function(){ 
    function rateBox(rating){ 
     // Ajax Call here... 
    } 
}); 
+0

要撥打rateBoxn上的任何圖像點擊/? – 2013-02-18 10:45:46

回答

2

你應該將你的功能.ready()功能之外的其他建議。

而且用於連接事件多個元素最好的做法是委派事件的父元素。它將僅附加一個事件,並偵聽從使用的選擇器冒泡的事件。防爆。使用JQuery ...

$(parent-container).on('click', element-selector, function(e){ 
    // Ajax call here. 
}); 

在你的情況,你可以添加父包裝(使用id = 「收視率」),並添加一個類你rateButtons(類= 「rateButton」)

爲減少DOM爲了清晰起見。

<div id="ratings"> 
    <input type="image" class="rateButton" name="rateButton[1]" src="img/Rate1.png" height="40" width="40" value="1"/> 
    <input type="image" class="rateButton" name="rateButton[2]" src="img/Rate2.png" height="40" width="40" value="1"/> 
    <input type="image" class="rateButton" name="rateButton[3]" src="img/Rate3.png" height="40" width="40" value="1"/> 
    <input type="image" class="rateButton" name="rateButton[4]" src="img/Rate4.png" height="40" width="40" value="1"/> 
    <input type="image" class="rateButton" name="rateButton[5]" src="img/Rate5.png" height="40" width="40" value="1"/> 
</div> 
<br> 

,然後綁定在父事件(的課程就緒功能外)

$('#ratings').on('click', '.rateButton', function(e){ 
    /* alternatively if the additional parent element is not desired 
     the event can be delegated to the document */ 

    var elem = this; // to refer to the clicked object 
    var index = $(this).index(); // to get the index, this index is 0 based 
    alert('clicked element index: '+index); 
    // Ajax call here. 
}); 

Example

JQuery .on() documentaion

1

的的document.ready功能之外將是:

function rateBox(rating){ 
    // Ajax Call here... 
} 

$(document).ready(function(){ 

}); 

通過在document.ready之外定義它,它位於window的範圍內,並且您的內聯onclick事件全部位於window對象的範圍內,因此可以對其進行訪問。

實際上,你仍然可以實現從功能的document.ready的window範圍,如果你真的想(但沒有理由):

$(document).ready(function(){ 
    window.rateBox = function(rating){ 
     // Ajax Call here... 
    }; 
}); 
2

你定義jQuery的domready中事件中的功能。這將導致異常,因爲JS引擎已經在window對象內尋找rateBox()。其移出$(document).ready()方法,你應該罰款:

<script type="text/javascript"> 
function rateBox(rating){ 
    // Ajax Call here... 
} 
</script> 

由於該功能是由圖像上的click事件調用,它的推斷,DOM已經由反正在執行功能時加載,所以將其包裝在DOMReady中是多餘的。

+0

好吧,如果我在$(document).ready()之外進行Ajax調用,它仍然可以工作嗎? – 2013-02-18 10:44:15

+0

是的。當你需要直接在DOM元素上工作時,你只需要在'ready()'內部包裝。 – BenM 2013-02-18 10:45:02

0

你應該定義rateBox功能的document.ready功能外:

function rateBox(rating){ 
    //do it 
} 
$(document).ready(function(){ 
    // Ajax Call here... 
});