динамический ряд работает без стиля

Question

динамический ряд работает без стиля

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>

Unknown 03 окт. 2013, в 06:22

Источник

1

Научитесь форматировать свой код, прежде чем публиковать его в Интернете. Плохое форматирование отвлекает людей от попыток помочь вам и просто перейдет к следующему вопросу.
Samuel Liew♦ 03 окт. 2013, в 03:56
0

извините, я пытаюсь научиться делать правильное форматирование, но когда я копирую его для eclipse и вставляю его в notepad ++, получается, что я буду редактировать его снова
user2805663 03 окт. 2013, в 03:58

Теги:

javascript

jquery

jquery-ui

jquery-mobile

1 ответ

Ещё вопросы

Научитесь форматировать свой код, прежде чем публиковать его в Интернете. Плохое форматирование отвлекает людей от попыток помочь вам и просто перейдет к следующему вопросу.
извините, я пытаюсь научиться делать правильное форматирование, но когда я копирую его для eclipse и вставляю его в notepad ++, получается, что я буду редактировать его снова

Unknown · Accepted Answer · 2013-10-03T01-55-00.000Z

После добавления мобильных библиотек:

<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

ваша демонстрация работает очень хорошо, это то, что я хотел, но почему у входного текста все равно нет стиля, почему моя собственная программа не работает, я все равно скопировал ваш код ... спасибо, вы надеетесь, что другие помогут с этим.
моя ошибка заключалась в количестве скобок, которые я должен начать изучать, как правильно форматировать код, поэтому я не получаю лишних скобок, спасибо