Question

我的代码显示一个表行，其中2个输入使用jquerymobile设置样式。

我使用jquery在＆＃34; plus＆＃34;时动态添加行。单击按钮。

问题：

当我追加一行时，静态项目会保留其样式，但附加的行不会被设置样式。

我做错了什么？

这里是代码： http://jsfiddle.net/Trident/o9r4csc9/

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>Test</h1>
  </div>
  <!-- /header -->

  <div data-role="content">
    <div class="input_fields_wrap">
      <table width="100%" border="0" cellspacing="5" cellpadding="5">
        <tr>
          <td width="180px">Entry price</td>
          <td>Percent of position</td>
        </tr>
        <tr>
          <td width="180px"><input type="number" name="entryprice" size="5" min="0" placeholder="100"></td>
          <td><input type="range" name="slider-fill" id="slider-fill" value="10" min="0" max="100" data-highlight="true" /></td>
        </tr>
        <tr>
          <td width="180px"><input type="number" name="entryprice" size="5" min="0" placeholder="100"></td>
          <td><input type="range" name="slider-fill" id="slider-fill" value="10" min="0" max="100" data-highlight="true" /></td>
        </tr>
      </table>
    </div>
    <div align="left">
      <button class="add_field_button" data-icon="plus" data-inline="true" >Add</button>
    </div>
    <!-- When "Add" is clicked, execute python script --> 

  </div>
  <!-- /content --> 

</div>
<!-- /page --> 

<script language="javascript">
<!-- adds or deletes input fields dynamically -->
$(document).ready(function() {
    var max_fields      = 1000; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID   
    var addline         = '<tr>\
                             <td width="180px"><input type="number" name="entryprice" size="5" min="0" placeholder="100"></td>\
                            <td><input type="range" name="slider-fill" id="slider-fill" value="10" min="0" max="100" data-highlight="true" /></td>\
                            </tr>';

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append(addline); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>
</body>
</html>

Answer 1

在JQuery mobile中，您可以通过以下代码手动更新动态内容：

  $(wrapper).trigger('create');

只需一行即可完成。

注意：您必须为此添加jquery脚本。我添加了它+ css。请自行更新UI问题。关键是风格正在发挥作用。

http://jsfiddle.net/o9r4csc9/9/

快乐编码：）

Answer 2

在小提琴中，您将新表行附加到包含div而不是表中。更改您的包装变量以引用该表。

var wrapper = $(".input_fields_wrap table"); //Fields wrapper

你的行动态地接收jquery-ui样式，你没有包含在你的'addrow'html中。更好的方法是克隆另一行的html，在你的情况下，最好的是最后一行。

var addline = wrapper.find('tr').last();

然后更改附加行：

$(wrapper).append(addline.clone()); //add input box

Answer 3

我在代码中更改了几行：

第一个将表行附加到表中，而不是包装div

var wrapper         = $(".input_fields_wrap table"); //Fields wrapper

第二个获得正确的HTML，无论是现在还是将来

var addline         = wrapper.find('tr:last')[0].outerHTML;

Answer 4

我已按照

的要求修改您的HTML

    http://jsfiddle.net/o9r4csc9/6/

Changes :
1. ID at table <br>
2. Append Row to Table not at div <br>
3. Few css added <br>

Answer 5

我修改了您的脚本部分并在http://jsfiddle.net/o9r4csc9/12/上进行了测试，请更改您的代码，如下所示

$(document).ready(function() {
    var max_fields      = 1000; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID   
    var addline         = '<tr>\
                             <td width="180px"><input class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" name="entryprice" size="5" min="0" placeholder="100" type="number"></td>\
                            <td><input class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset ui-slider-input" name="slider-fill" id="slider-fill" value="10" min="0" max="100" data-highlight="true" data-type="range" type="number"><div class="ui-slider  ui-btn-down-c ui-btn-corner-all" role="application"><div style="width: 10%;" class="ui-slider-bg ui-btn-active ui-btn-corner-all"></div><a style="left: 10%;" aria-labelledby="slider-fill-label" title="10" aria-valuetext="10" aria-valuenow="10" aria-valuemax="100" aria-valuemin="0" role="slider" data-theme="c" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true" class="ui-slider-handle ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all" href="#"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span></span></a></div></td>\
                            </tr>';

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).find("table").append(addline); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

动态添加新项目Onclick时丢失样式

5 个答案: