单击剑道按钮时如何在 div 中添加新的文本框？答案

【问题标题】：How to add a new textbox in the div when I click kendo button?单击剑道按钮时如何在 div 中添加新的文本框？
【发布时间】：2017-02-07 07:09:12
【问题描述】：

我是剑道 UI 的新手。我在HTML 中有一个div：

<div id="newlabel"></div>

在这个div 中，我想通过使用kendo UI button 添加一个新的label 并增加数量？

@(Html.Kendo().Button()
    .Name("button name")
    .HtmlAttributes(new { type = "button",
                          @class = "k-primary", 
                          id = "NewButton",
                          param = "newlabel",
                          style = "height:1.9em;font-size:11px;margin-top:8px;"})
    .Content(NEW BUTTON")
    .Events(ev => ev.Click("Addlabel")))

【问题讨论】：

我对您在这里提出的问题感到困惑。如标题所示，您要问如何在单击按钮时添加新文本框，然后在实际问题中您要问如何添加标签？你能澄清一下你真正追求的是什么吗？
sry 造成混淆，实际上我必须在 div 中添加两个文本框和标签。该脚本位于单独的文件中。那么如何将 div id 传递给 javascript 以在运行时附加标签和文本框。

标签： jquery html css kendo-ui kendo-asp.net-mvc

【解决方案1】：

我在这里准备了一个简单的演示供你测试：http://dojo.telerik.com/orOKI/3

这使用与 MVC Wrapper 基本相同的设置。

您需要做的就是将 @Data_target="{YourDivIDHere}" 添加到 html 属性中，如下所示：

.HtmlAttributes(new { type = "button",
                          @class = "k-primary", 
                          @Data_target="MyDivHere", 
                          id = "NewButton",
                          param = "newlabel",
                          style = "height:1.9em;font-size:11px;margin-top:8px;"})

然后，这会将data-target 属性加载到按钮上，以便您可以定位正确的包含 div。（这也意味着您可以在以后更改 div。

然后使用我创建的函数addItems 我们有以下内容：

function addItems(e)
              {

                var target = $(e.sender.element[0]).data("target");
                $('#' + target).append('<div class="form-group">
                 <label class="col-md-2 form-label">I\'m a label</label>
                 <div class="col-md-10">
                 <input type="textbox" class="form-control" />
                 </div></div>'); 


              }

所有这一切都是从按钮获取 data-target 属性，如果这是页面上唯一使用此特定数据属性的项目，您可以直接调用它而不是导航按钮结构来获取它的 id。

然后我所做的就是将标签和文本框附加到 div 和它。

如果您需要更多信息，或者您的要求比这更多，请告诉我。

注意您始终可以使用kendo template，以便日后更轻松地进行编辑。

【讨论】：

【解决方案2】：

如果你想在运行时在div 中放置一个label，你可以使用jQuery，像这样：

$("<label id='testLabel'>Test</label>").appendTo("#newlabel");

您可以使用 jQuery 再次更改 label 的内容，如下所示：

$("#testLabel").text(number);

【讨论】：