Jquery 函数只执行第一项答案

【问题标题】：Jquery Function Only executing of first itemJquery 函数只执行第一项
【发布时间】：2012-12-05 19:54:38
【问题描述】：

我想知道是否有人可以帮助我。我对 jQuery 很陌生，但喜欢学习它。我似乎有一个小问题，我想知道是否有人可以帮助我。我正在使用以下 jQuery 将用户 ID 和属性 ID 添加到 MySQL（如“添加到收藏夹”）该函数在第一个属性上执行良好，但在它下面的另一个上却没有。

查询

$(document).ready(function(){
$("#clickme").delegate("#insert", "click", function(){

var ruid=$("#ruid").val();
var propid=$("#propid").val();


$.post('inc.saveprop.php', {ruid: ruid, propid: propid},
function(data){
$("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); //Fade in the data given by the insert.php file
});
return false;
});
});
</script>

html：下面是循环的

<? while { 
<input id=\"ruid\" type=\"hidden\" value=\"".$uid."\" />
<input id=\"propid\"  type=\"hidden\" value=\"".$props['propid']."\" />
<a class=\"insert\" title=\"Insert Data\" href=\"#\">Save to Favourites</a>
 <!-- For displaying a message -->

<div id=\"message\"></div>";
} etc  ?>

脚本将适用于循环中的第一项，但随后不适用于其他项目。我知道其中一个问题是我有多个具有相同 ID 的隐藏类型（在循环中），大禁忌但不知道谁更改代码以访问 id=name+ID 或使用 Class= 或 Name = 代替。

如果有人能帮助我，我会非常感激（我已经在谷歌上搜索了几个小时尝试不同的东西并把它弄坏了 4 次哈）

感谢您花时间阅读

【问题讨论】：

标签： php jquery mysql ajax

【解决方案1】：

一个问题是您需要存储这两个 ID，以便它们可以通过 AJAX 调用传递到您的服务器。一种方法是使用 jquery 的 data() 命令，它允许您读取/写入与特定 HTML 元素相关的键值数据。在这种情况下，您可以将两个 ID 直接存储在 <a>...</a> 元素中。

<a class="insert" title="Insert Data" data-ruid="ruid1" data-propid="propid1" href="#">Save to Favourites</a>

您需要解决的另一个问题是如何拥有任意数量的这些“保存到收藏夹”链接，而无需对它们进行唯一命名。这是通过使用类和 jquery 类选择器来完成的。

示例 HTML：

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid1" data-propid="propid1" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid2" data-propid="propid2" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid3" data-propid="propid3" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

示例 javascript：

$(document).ready(function(){
    $(".clickme").delegate(".insert", "click", function(){
        // the 'this' variable refers to whatever was clicked, in this case 
        // it is the <a> ... </a> element with the class 'insert'

        // use the jquery data() command to retrieve the saved IDs         
        var ruid=$(this).data('ruid');
        var propid=$(this).data('propid');

        var data = "ruid: " + ruid + " propid: " +  propid;

        // find the sibling of the <a> ... </a> element that has the class 'message'
        // and update it with the retrieved information
        var message = $(this).siblings(".message");

        message.html(data);
        message.hide();
        message.fadeIn(1500);

        //$.post('inc.saveprop.php', {ruid: ruid, propid: propid}, function(data){
        //    $("#message").html(data);
        //    $("#message").hide();
        //    $("#message").fadeIn(1500); //Fade in the data given by the insert.php file
        //});

        return false;
    });
});

这个例子的jsfiddle：http://jsfiddle.net/wQjhN/7/

【讨论】：

很好，但如果你打算使用 HTML5，你不妨使用不带参数的 .data() 并将数据字段作为对象 - 比多次调用快一点，而且你不必建立要提交的数据字符串（您从 OP 的代码中丢失了提交部分）
哇。一个非常全面的答案。我几乎等不及现在早上去试试了。这是希望这是一个！感谢您抽出宝贵时间提供帮助
今天早上迫不及待想试试这个！你是个十足的明星！！！！这是第一次的款待 - 我非常感谢你！！！！！！！！！！！！哇哇哇！

【解决方案2】：

您在选择器中使用了 ID：

$("#clickme")

ID 是唯一的，jQuery 只会获取该特定 ID 的第一个实例，而不是全部。

您只需稍微更改循环即可使用类：

<input class=\"ruid\" type=\"hidden\" value=\"".$uid."\" />

然后使用选择器中的类来代替：

$(".clickme")

转到on() 而不是delegate() 也是一个好主意

$("#insert").on("click", ".clickme", function(){ ... }

【讨论】：

【解决方案3】：

底线，修复 HTML 生成，并为重复、相似的元素使用类，为独特的元素使用 ID。

点击处理程序不会附加到具有相同 ID 的多个项目，因为它只希望找到一个。

您可以使用 @adeneo 的修复程序来解决这个问题，但是您的 ruid 和 propid 会遇到类似的问题，并且无法正确读取这些值 - 您将再次获得第一个实例当您使用 ID 而不是类时，页面上的 ruid 和 propid。

虽然您可能会想出一些 hacky 选择器 - 可能会在输入元素或其他东西上循环，例如$(this).find('input') 然后循环，假设第一个是ruid，第二个是propid。这是一种 hack，充其量是脆弱的 - 如果 HTML 顺序发生变化，一切都会中断。

修复 HTML，然后您就可以使用正确的选择器（可能是 $(this).find('.ruid') 或类似的东西）

【讨论】：