没有风格的动态行作品答案

【问题标题】：dynamic row works without style没有风格的动态行作品
【发布时间】：2013-10-03 03:29:59
【问题描述】：

我有这个小的动态行程序。我有一个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>

【问题讨论】：

在将代码发布到网上之前，一定要学会格式化代码。错误的格式会让人们不想帮助你，只会跳到下一个问题。
对不起，我试图学习做正确的格式，但是当我将它复制到 Eclipse 并将它粘贴到记事本 ++ 上时，结果我会再次编辑它

标签： javascript jquery-ui jquery jquery-mobile

【解决方案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 更改为 div，类为 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

【讨论】：

您的演示工作非常好，正是我想要的，但为什么输入文本没有样式，为什么我自己的程序无法正常工作，我还是复制了您的代码，哈哈。谢谢您希望其他人能得到帮助这个。
我的错误在于大括号的数量，我应该开始学习如何正确格式化代码，所以我不会得到额外的大括号，谢谢