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

click event not triggered in the external file

本文关键字:事件 外部 文件 单击      更新时间:2023-09-26

我试图创建一个库代码,可以跨我所有的html页面使用。我是JS的新手,这是我第一次尝试编写像库函数一样的代码。

我有一个文本字段和旁边的按钮,点击按钮,这添加了另一个文本字段下面和旁边的按钮,这也删除了前一行的按钮。

我设法在同一行做一个按钮,并在下一行添加文本字段,但是按钮单击新添加的方法不与纯JS一起工作,所以我试图使用jquery"on"单击事件。由于某些原因,我的情况没有被触发。不知道我错过了什么。

外部文件代码

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);
        });
    }
}
$(document).ready(function () {
    addAnother.addAnotherField("addAnother", "addAnotherContainer", "fieldArray[]");
});

JS工作代码:http://jsfiddle.net/balasivagnanam/ekoob8f0/

next按钮不工作代码JShttp://jsfiddle.net/balasivagnanam/ukseeuak/

与Jquery

:http://jsfiddle.net/balasivagnanam/6ea2dk6m/

这是你想要的吗:

/** 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);
    });
});

这里是JSFiddle演示