Question

我正在尝试创建一个可以在我的所有html页面中使用的库代码。我是JS的新手，这是我尝试编写的第一个代码，就像库函数一样。

我有一个文本字段和旁边的按钮，点击按钮后会在下面添加另一个文本字段，旁边有一个按钮，这也会删除上一行中的按钮。

我设法在同一行中执行一个按钮并在下一行中添加文本字段，但是对于新添加的方法的按钮单击不适用于纯JS，所以我尝试使用jquery“on”click事件。由于某些原因，它不会在我的情况下触发。不确定我错过了什么。

外部文件中的代码

var addAnother = {
    addAnotherField: function (eventTrigger, fieldContainer, arrayField) {
        console.log("called");
        var eventTrigger = eventTrigger;
        console.log("ready called", eventTrigger);
        $(document).on('click', eventTrigger, function (e) {
            console.log("click called");
            var buttonText = this.value;
            var div = document.getElementById(fieldContainer);
            var element = document.getElementById(eventTrigger);
            element.parentNode.removeChild(element);
            var input = document.createElement("input");
            input.type = "text";
            input.name = arrayField;
            div.appendChild(document.createElement("br"));
            div.appendChild(input);
            var button = document.createElement("input");
            button.type = "button";
            button.id = eventTrigger;
            button.value = buttonText;
            div.appendChild(button);
        });
    }
}

HTML中的代码

$(document).ready(function () {
    addAnother.addAnotherField("addAnother", "addAnotherContainer", "fieldArray[]");
});

使用JS代码： http://jsfiddle.net/balasivagnanam/ekoob8f0/

下一步按钮非工作代码JS http://jsfiddle.net/balasivagnanam/ukseeuak/

使用Jquery： http://jsfiddle.net/balasivagnanam/6ea2dk6m/

Answer 1

这就是你想要的：

/** this part will be located in another file added as a js library */
function addAnother(elem) {
    var text = $("#addAnotherField").clone();
    $("<br/>").insertBefore($("#addAnother"));
    text.insertBefore($("#addAnother"));

}
/* this part will be coded below the above code file in the html file*/

$(document).ready(function () {
    $('#addAnother').click(function () {
        addAnother(this);
    });
});

Here is the JSFiddle demo

单击事件未在外部文件中触发

1 个答案: