0

この小さな動的行プログラムがあります。、label、option boxおよび がありinput textます。の数は の数input textsによって異なりoption boxます。スタイルがなくてもうまく機能しますが、入力をスタイルすると機能しなくなり、何が間違っていたのかわかりません。

これらのコードを取り除けば

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">

スムーズに実行されますが、追加すると入力ボックスが機能しません ここにコードがあります 

<!DOCTYPE html>
<html>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>row</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
    <style type="text/css">

</style>
    <script type="text/javascript">//<![CDATA[ 
        $(window).load(function(){
        jQuery('.ui-select').delegate('select[name="radio-choice-1"]', 'change', function(event){
        var field_template = '<input type="text" name="row[]" /><br />';
        var howmany = parseInt(jQuery(this).val());
        var container = jQuery(this).parent('.ui-select').find('.form-dynamic-fields').empty();
        if (howmany > 0){
        for (i=1; i<=howmany; i++){
        container.append(jQuery('<div class="ui-select-row"><input type="text" name="rows[' + i +'][]" />'));
        }
        }
        });
        jQuery('.ui-select').delegate('select[name="rows_counts[]"]', 'change', function(event){
        var parent = jQuery(this).parent('.ui-select-row');
        parent.find('input[type="text"]').remove();
        var howmany = jQuery(this).val();
        var row_id = jQuery(this).attr('row-id');
        for (i=1; i<=howmany; i++){
        parent.prepend('<input type="text" name="rows[' + row_id + '][' + i + ']" />');
        }
        });
        });//]]>  
    </script>
</head>
    <body>
        <div class="ui-select" id="rows" data-role="fieldcontain">
            <label for="rows" class="select" data-role="fieldcontain">Number Of Rows:</label>
            <select name="radio-choice-1" id="rows" data-native-menu="false"  tabindex="-1" data-role="fieldcontain" class="ui-field-contain ui-body ui-br" data-mini="true">               
                <option data-placeholder='true'>select number of rows</option>
                <option value="1">1 rows</option>
                <option value="2">2 rows</option>
                <option value="3">3 rows</option>
                <option value="4">4 rows</option>
            </select>
        <div class="form-dynamic-fields"></div>
        </div>
    </body>
</html>
4

1 に答える 1