javascript - 模态仅显示第一个标签，但随后 HTML 的其余部分被截断

Question

编辑2：我找到了一种让它工作的方法，但它似乎不是它应该如何工作的。也许我习惯了 C#，这对我来说很有意义，但这并不哈哈。无论如何，我改变了我的javascript。如果这完全是愚蠢的，那会很高兴知道。感谢 SO 一如既往地成为我的共鸣板。=)

    <script type="text/javascript">
    $(".btnModal").click(function () {
        var paymentId = $(this).data('id');//get the id of the selected item
        var phoneNumber = $(this).data('phone');//get the phone number of the selected item
        var locationNumber = $(this).data('locationNumber');//get the locationNumber of the selected item

        var modalDisplay = document.getElementById("modalPaymentId");
        
        modalDisplay.innerHTML += "Id: <label>" + paymentId + "</label><br />";
        modalDisplay.innerHTML += "Phone: <label>" + phoneNumber + "</label><br />";
        modalDisplay.innerHTML += "Number: <label>" + locationNumber + "</label><br />";
        modalDisplay.innerHTML += "Num2: <label>" + locationNumber + "</label>";
    });
</script>

编辑：我在这里找到了一些东西，但还没有找到解决方法。似乎当我在 javascript 中设置文本时，它确实切断了所有内容。我试图想出如何格式化这个javascript。任何帮助表示赞赏。

---

唯一显示的是 Id: [myIdNumber] ，之后什么都没有。所有字段都有正在传递给它们的值。甚至没有显示位置号码和电话的标签。就像模态的其余部分在显示一些数据后才被切断（它被切断，因为在调试时在开发人员工具中显示后什么都没有）。你可以看到我已经改变了我填充模态数据的方式，无论它在显示第一个值后切断了什么。重要的是，如果我注释掉第一个值，它将显示 ID：电话：[myPhoneNumber]。所以在它开始显示我的价值之后，有些东西正在杀死模态 div 的其余部分。有什么想法吗？

模态的 HTML

@* Modal popup of product summary *@
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Payment Summary</h4>
            </div>
            <div class="modal-body">
                <div>
                    Id:
                    <label class="modalPaymentId" type="text" name="paymentId" id="modalPaymentId" />
                    <br />
                    Phone:
                    <label class="modalPhone" type="text" name="phoneNumber" id="modalPhoneNumber" />
                    <br />
                    Location Number:
                    <label class="modalLocationNumber" type="text" name="locationNumber" id="modalLocationNumber" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

用于模态的 JavaScript

    <script type="text/javascript">
        $(".btnModal").click(function () {
            var paymentId = $(this).data('id');//get the id of the selected item
            var phoneNumber = $(this).data('phone');//get the phone number of the selected item
            var locationNumber = $(this).data('locationNumber');//get the locationNumber of the selected item
            //document.getElementById("modalPaymentId").innerHTML = paymentId;
            //document.getElementById("modalPhoneNumber").innerHTML = phoneNumber;
            $('.modalPaymentId').text(paymentId);//set the id to the input on the modal
            $('.modalPhone').text(phoneNumber);//set the phone number to the input on the modal
            $('.modalLocationNumber').text(locationNumber);//set the modalLocationNumber to the input on the modal
        });
    </script>

这是调用模态的按钮

     <button data-id="@item.PaymentId" data-phone="@item.Phone" data-locationNumber="@item.LocationNum" data-toggle="modal" data-target="#myModal" class="btnModal"> Summary </button>

标签： javascripthtmltwitter-bootstraprazorbootstrap-modal