Question

我有一些HTML代码可以创建三个jQuery图标：

<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="1"></span>
<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="2"></span>
<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="3"></span>

一些JavaScript jQuery代码，我想点击每个图标一次。我使用它时工作正常：

$(".one-click").one("click", function() { alert(this.dataset.customerId) } );

然而，当我尝试使用我自己的一个功能时，它只会触发第一个点击的图标。当第一次点击另一个图标时，它永远不会触发：

$(".one-click").one("click", function() { my_custom_function(this.dataset.customerId) } );

对于单击的第一个图标，它可以正常工作，但不会为单击的其他图标触发。 jQuery文档说每个事件类型每个元素应该触发一次。我错过了什么？ my_custom_function应该针对每个被点击的元素执行...

编辑：

我应该详细说明my_custom_function。它实际上是从Web服务器重新加载跨度。具体来说，它们被包含在div中：

<div id="my_div">
    <span class="ui-icon ui-icon-circle-close one-click" data-customer-id="1"></span>
    <span class="ui-icon ui-icon-circle-close one-click" data-customer-id="2"></span>
    <span class="ui-icon ui-icon-circle-close one-click" data-customer-id="3"></span>
</div>

...在my_custom_function中的某处我使用$("#my_div").load("/some_url/")重新加载。注释掉此加载线后，函数似乎正在正确触发。如何在load()之后应用一次性触发功能？再次对这些元素进行one()调用似乎没有做到这一点。

Answer 1

看看：

<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="1">s1</span>
<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="2">s2</span>
<span class="ui-icon ui-icon-circle-close one-click" data-customer-id="3">s3</span>

$(document).ready(function(){
    function my_custom_function(cust_id) {
        alert(cust_id);
    }
    $(".one-click").one("click", function() {
        my_custom_function(this.dataset.customerId);
    });
});

http://jsfiddle.net/F7Kdy/5/

Answer 2

将其重写为：

$(".one-click").one("click", my_custom_function),

或将其构建为可调用函数，如下所示：http://jsfiddle.net/scott_in_ct/QbpC8/

jQuery没有为每个元素触发

2 个答案: