Question

点击按钮，我试图将动态生成的html添加到特定位置。

我想在HTML部分中添加将其添加到此处。这是我的完整程序

 <script type="text/javascript">
$(document).on("click", "#moreFieldsBtn", function() {
   var orderconfirmhtml = $('<h4>Complete your order</h4>');
   $(this).parent().next('.Test-details').after(orderconfirmhtml);
});
 </script>
</head>
<body>
<div data-role="collapsible">
    <div class="prd-items-detials">
        <ul>
            <li class="head">
                <form>
                    <label class="testtt" for="checkbox-mini-0">Test Item</label>
                </form>
            </li>
            <li class="prd-items-qt">
                <div class="col"> <span class="prd-sm-img"><img id="imagesd" type="img" height="40" width="40"  src="' + image + '"/> 
                    </span> 
                </div>
                <div class="col"> <i class="minus" id_attr="59"> </i>
 <i class="qt_class" id_attr="59">1</i>  <i class="plus" id_attr="59"> </i> 
                </div>
                <div class="col"> <a href="#" id_attr="59" class="btn btn-sm">Topping</a> 
                </div>
                <div style="display: none;" class="price" id_attr="59">50</div>
                <div class="col total" id_attr="59">50</div>
            </li>
        </ul>
    </div>
    <div id="59" class="Test-details">// Add it to here</div>
</div>
<input type="button" id="moreFieldsBtn" value="Add Data To Specific Place" />
</body>

但那里没有添加任何东西，有人可以告诉我如何解决这个问题吗？

Answer 1

你的javascript代码应该是这样的

$(document).on("click", "#moreFieldsBtn", function() { 
   var orderconfirmhtml = '<h4>Complete your order111</h4>';
   $(this).parent().find('.Test-details').append(orderconfirmhtml);
});

或

$(document).on("click", "#moreFieldsBtn", function() { 
   var orderconfirmhtml = '<h4>Complete your order</h4>';
   $(this).parent().find('.Test-details').html(orderconfirmhtml);
});

引用此jsfiddle http://jsfiddle.net/WGQv6/1/或http://jsfiddle.net/WGQv6/2/

Answer 2

你可以试试这个：

<script type="text/javascript">
    $(document).ready(function () {
        $('#moreFieldsBtn').click(function () {
            var orderconfirmhtml = $('<h4>Complete your order</h4>');
            $('.Test-details').html(orderconfirmhtml);
        });
    });
</script>

对于$（document）.ready（）方法中的函数，它可以在页面加载之前运行java代码，并使用jquery选择器来查找html元素。 Jquery可以绑定事件动作。

无法将动态生成的html添加到特定位置

2 个答案: