第一个 jQuery 插件问题

Question

大家好，首先让我说我是 jQuery 菜鸟！我想制作一个自动填充 html 选择元素的简单插件，它在第一个元素上运行良好，但是当我再次调用它来填充第二个元素时，它什么也不附加。这是我在 ajax 选项卡中的调用，其中 #product 和 #new-category 是选择元素：

$(function(){

    $("#product").popSelect("products");

    $("#new-category").popSelect("categories");

});

HTML：

><select id="product" name="product">
>     < option value="">Select Product</option>                 
></select >     
><select id="new-category" name="new-category">
>      < option value="">Select Category< /option>                  
></select >

这是插件：

(function(jQuery){
jQuery.fn.popSelect = function(table) {

    return jQuery(this).each(function(){            

        var obj = jQuery(this); 

        if(this.nodeName.toLowerCase() == 'select'){
            jQuery.getJSON("../app/modules/ajax/json.php", { table:table },
                function(data){                 
                    var options = '';           
                    jQuery.each(data, function(i,item){                                        
                        options += '<option value="' + item.id + '">' + item.title + '</option>';                   
                    });                 
                    obj.append(options);                
                });     
        };
    });
};
})(jQuery);

奇怪的是，如果我更改第二个函数调用 $("#new-category").popSelect("categories"); 到 $("[id^='new-category']").popSelect("categories"); 然后它工作正常，我的选择器有问题吗？

感谢您的帮助！

Answer 1

我没有直接的答案，但看起来您基本上同时有 2 个未完成的活动 ajax 调用，这可能会导致一些奇怪？

Answer 2

好的，像这样吗？

(function($){
jQuery.fn.popSelect = function(table) {

    return $(this).each(function(){         

        var obj = $(this);  

        if(this.nodeName.toLowerCase() == 'select'){
            obj.queue("fx", function(){$.getJSON("../app/modules/ajax/json.php", { table:table },
                function(data){                 
                    var options = '';           
                    $.each(data, function(i,item){                                         
                        options += '<option value="' + item.id + '">' + item.title + '</option>';                   
                    });             
                    obj.append(options);                
                }); }); 
        };
    });};})(jQuery);

我没有收到任何错误，但它仍然只填充第一个选择，在 IE 中的响应相同。令人费解的是，甚至在调用之间添加了一个“等待”功能，但它什么也没做。有id标签==名称标签好吗？我刚刚注意到，将“id='new-category'”替换为“id='newwcategory'”可以让它工作！？ ids中的“-”有什么问题吗？

再次感谢迄今为止的所有帮助！

Answer 3

我已经确定这是 jQuery UI 选项卡的问题，因为该插件在没有它们的情况下也能完美运行！如果先前选择的选项卡具有相同的元素，则不会填充当前选定选项卡中的元素 ID。示例：

第一个标签：

<select id="new_category" name="new_category">

     <option value="">Select Category</option>
</select>

第二个标签：

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

<select id="new_category" name="new_category">
      <option value="">Select Category</option>
</select>

第三个标签：

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

从 Tab 1 转到 Tab 2 - 将填充产品但不填充 新类别 并从选项卡 2 转到选项卡 3 - 将不会填充产品...

即如果在 当前选项卡，它不会被填充和（可能？）前一个选项卡 元素将是虽然我看不到这个，因为它没有加载。我有 尝试摆弄缓存但没有帮助，指定表单ID 作为它的父母应该解决这个问题，但为什么有必要， 标签不应该是独立的吗？

Answer 4

我刚刚回答了一个类似的问题，基本上是you can't have two elements with the same ID on the same page，它导致了这个确切的问题。您必须使用一个类或更改其中一个 ID。