如何通过创建单个函数将多个具有不同ID的按钮附加到div

Question

我的任务是将按钮动态地附加到div ..我想使用一个简单的函数将多个具有不同ID的按钮附加到单个或不同的div。 下面的代码，我必须用来将单个按钮附加到div。

<script type="text/javascript">
$(document).ready(function () {
    addInputTo($(".myClass"));
    $("#field").click(function () {
        alert("hi");
        $(".myClass").appendTo({
            icons: {
                primary: "ui-icon-locked"
            },
        });
    });

});

function addInputTo(container) {
    var inputToAdd = $("<input/>", {
        type: "button",
        id: "field",
        value: "Test Button"
    });
    // var s="trype='button";
    container.append(inputToAdd);
}

</script>


<div class="myClass"></div>

是否有解决方案通过创建单个函数来附加多个按钮。

_app.CreateButton (id, text, primaryIcon, secondaryIcon, className);

请帮我

并且我们使用下面的代码将图标附加到按钮上，但是没有用，请帮助我

<script type="text/javascript">
function runEffect() {
  debugger;
  alert("1");
  $( ".AdvSearchSaveButton" ).button({
    icons: {
      primary: "ui-icon-locked"
    },   
  });
}

$(document).ready(function () {
  $("#filed").click(function () {
    alert("hi");
    runEffect();
    //  $( "#filed" ).addClass( "ui-icon-locked" );

  });
});
</script>

Answer 1

您可以将功能addInputTo更改为

function addInputTo(container, id, text){
            var inputToAdd = $("<input/>", { type: "button", id: id, value: text });
            container.append(inputToAdd);
}

然后使用

addInputTo($(".myClass"), 'filed', 'test button');

Answer 2

这实际上就是您所需要的。 我只是将事件处理程序与具有自调用函数的class =“ myClass”的任何<div>的单击绑定在一起。

HTML：

    <div class="myClass" style="width:150px; height:150px;background-color:red;"></div>

Javascript：

var id=0;

$(function(){
    $(".myClass").click(function(){
        id++;
        var newButton = "<input type='button' id='number" + id.toString() + "'value='test button'></input>";
        $(this).append(newButton);
    });
});

只需单击您的<div> ，一个具有唯一ID的新按钮将附加到<div> 。 干杯!