0

我有这个小的动态行程序。我有一个label，一个option box，和input text。的数量input texts取决于 中的数量option box。它适用于 out 样式，但是当我为输入设置样式时，它不再起作用，而且我不明白我做错了什么。

如果我拿走这些代码

<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

1

添加移动库后：

<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">

您的 html 元素 css 将根据上述 css 更改。因此，在您的情况下，您select element更改为divwith class ui-select。利用

var container = jQuery(this).parent('.ui-select').siblings('.form-dynamic-fields').empty();

代替

var container = jQuery(this).parent('.ui-select').find('.form-dynamic-fields').empty();

尝试：

jQuery('.ui-select').delegate('select[name="radio-choice-1"]', 'change', function(event){
    console.log("here");
    var field_template = '<input type="text" name="row[]" /><br />';
    var howmany = parseInt(jQuery(this).val());
    var container = jQuery(this).parent('.ui-select').siblings('.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 +'][]" />'));
        }
    }
});

DEMO FIDDLE

于 2013-10-03T03:59:36.977 回答