Question

我在尝试从页面上的多个图像调用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...
    }
});

Answer 1

你在jQuery的DOMReady事件中定义了这个函数。这将导致异常，因为JS引擎已经在rateBox()对象中寻找window。将其移出$(document).ready()方法，您应该没问题：

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

由于函数是由图像上的click事件调用的，因此推断出在执行函数时已经加载了DOM，因此将它包装在DOMReady中是多余的。

Answer 2

您应该像其他人建议的那样将您的功能移到.ready()功能之外。

将事件附加到多个元素的最佳做法是将事件委托给父元素。它只会附加一个事件，并监听从使用的选择器冒出的事件。防爆。使用JQuery ......

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

在你的情况下，你可以添加一个父包装（id =“ratings”）并在你的rateButtons中添加一个类（class =“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

Answer 3

将其移到document.ready function：

之外

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...
    };
});

Answer 4

您应该在document.ready function：

之外定义rateBox函数

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

多个图像点击JQuery

4 个答案: