첫 번째 jQuery 플러그인 문제

StackOverflow https://stackoverflow.com/questions/624208

문제

헤이 얘들 아, 먼저 jQuery 멍청이라고 말해줘! HTML Select 요소를 자동으로 인구하는 간단한 플러그인을 만들고 싶습니다. 첫 번째 요소에서 잘 작동하지만 다시 호출하면 두 번째 요소를 채우면 아무것도 추가되지 않습니다. 다음은 #Product 및 #New-Category가 선택 요소 인 Ajax 탭에서 내 호출입니다.

$(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");그런 다음 잘 작동합니다. 선택기에 문제가 있습니까?

도움을 주셔서 감사합니다!

도움이 되었습니까?

해결책

나는 기본적으로 비슷한 질문에 대답했다 같은 페이지에 동일한 ID를 가진 두 개의 요소가 없을 수 없습니다.,이 정확한 문제를 일으킨다. 클래스를 사용하거나 ID 중 하나를 변경해야합니다.

다른 팁

나는 직접적인 답변이 없지만 2 개의 Active Ajax 호출이 본질적으로 탁월한시기에 약간의 이상하게 이어질 수있는 것처럼 보입니까?

좋아, 이렇게?

(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 "로 대체하여 방금 눈에 띄는 것!? "-" '는 ID에 문제가 있습니까?

지금까지 모든 도움에 다시 한번 감사드립니다!

플러그인이 없으면 플러그인이 완벽하게 작동하기 때문에 이것이 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>

탭 1에서 탭 2로 이동 - 제품은 채워 지지만 New_Category는 아니며 탭 2에서 탭 3으로 이동 - 제품이 채워지지 않습니다 ...

즉, 이전 탭에 해당하는 ID가있는 요소가 현재 탭에 존재하는 경우, 채워지지 않으며 (아마도)로드되지 않기 때문에 이것을 볼 수는 없지만 이전 탭 요소는 이루어질 것입니다. 캐시를 사용하려고 시도했지만 도움이되지 않습니다. 양식 ID를 부모 가이 문제를 해결 해야하는 이유를 지정하는 것이 도움이되지 않지만 왜 필요한가? 탭이 독립적이지 않아야합니까?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top