請問如何將一個dynamic產生formfield id pass入jQuery function?

cage

小弟新近寫了一個dynamic add table的event, 當.addow button被click時, 就會clone table最後一行, 每行格內都有一個formfield, 我在後台的JSP可以用String food[]取回值, 但我不能apply已寫好的suggestbox function到這個form field, 請問該如何處理呢? 謝謝

<script type="text/javascript">        
        $(document).ready(function() {
                $('#form1').validationEngine();
                
                var newRowNum = 0;
                $('.addRow').click(function(){
                        var $newTr = $('#tb1 tbody>tr:last').clone(true);
                        $('input[id^=foods]', $newTr).val('');
                        $newTr.insertAfter('#tb1 tbody>tr:last');
                        newRowNum += 1;                                         <==這裡想做一個counter, 想它可以識別到第newRowNum個formfield  
                        $newTr.find('input:even').attr('id', function(){
                        $('input#foods'+ newRowNum).jsonSuggest(                <==這裡想pass新產生的formfield id進去, 但不成功
                                function(text, wildCard, caseSensitive, notCharacter) { 
                                        rez = $.ajax({ 
                                        type: 'GET', 
                                        url: 'getJSON.jsp',
                                        data: 'foods=' + text,
                                        dataType: 'json', 
                                        async: false 
                                });
                                return eval(rez.responseText); 
                                },
                                { ajaxResults:true 
                                });
                        });
                });
        });
</script>

已試了('#foods'+newRowNum)......等等, 都不得要領..... 但如果我直接hardcode做$('input[id=foods]').jsonSuggest( 就沒有問題, 可惜只有第一行可以出現suggestbox, 請指教, 謝謝

[ 本帖最後由 cage 於 2009-11-11 09:57 編輯 ]

xxoxxoxxoxx

是要將資料累加嗎??
是的話，以下這寫法好像有點笨，不知道有無更好寫法@_@

var aa ="";
        for(var i=0;i<$("input").length;i++){
                var data = $("input:eq("+i+")").val();
                aa = aa+data;
        }
        alert(aa);

wmh

你這裡面有些程式寫法怪怪的，可能要先把 jQuery 的用法先弄清楚喔。

你要複製的 field 是要給相同的 name 還是加上流水號的 name 呢?
看你的流程好像是要用流水號，但是也不太正確，你可以試試看已下流程：
1.  clone 一行 tr
2. 找出複製出的這一行 tr 內的 field，把 id 改成新的
3. append 到 table
4. 再 bind jsonSuggest()

cage

謝謝, 但請經過STEP 4 bind jsonSuggest()後, 再click addrow就會將之前的屬性clone到新row上.... 產生了一個大問題

我在click了7次addrow後再輸入的所出的suggestbox結果....

<script type="text/javascript">        
        $(document).ready(function() {
                $('#form1').validationEngine();
                var newRowNum = 1;
                $(".addRow").click(function(){
                        var $newTr = $("#tb1 tbody>tr:last").clone(true);
                        $newTr.find('.jsonSuggestResults').remove();                 <======這行嘗試clear jsonSuggestResults的div
                        $newTr.appendTo("#tb1 tbody");
                        $('input[id^=foods]', $newTr).val('');
                        $newTr.find('input[id^=foods]').each( function(){
                                $(this).jsonSuggest(
                                                function(text, wildCard, caseSensitive, notCharacter) {
                                                        rez = $.ajax({ 
                                                                type: 'GET', 
                                                                url: 'getFoodJSON.jsp',
                                                                data: 'foods=' + text,
                                                                dataType: 'json', 
                                                                async: false 
                                                        });
                                                        return eval(rez.responseText); 
                                                        },
                                                        { ajaxResults:true 
                                                        });
                        });
                        $newTr.find('input[id^=supplyDate]').each('id', function(){
                                $(this).datepicker({dateFormat:'yy-mm-dd'});
                        });
                });
        });
</script>

請問有沒有方法clear之前formfield的"記錄", 或者如何unbind 11至23行的jsonSuggest function呢?..... 謝謝

[ 本帖最後由 cage 於 2009-11-11 11:27 編輯 ]

wmh

試試看 clone 的時候不要加 true 呢？
不過因為加上 jsonSuggest() 並不是像一般的 bind event 這麼單純，不一定可行，因為不確定 initial jsonSuggest() 時，他幫你做了哪些事情，加了哪些東西。

如果不行的話，就改成重新建立新的 tr 再 append 囉～

cage

成功了, 謝謝