在Javascript的document.ready处理程序中多次调用函数

Question

因此，我有一段代码绝对依赖于DOM，并且需要在页面加载后执行； 如果不是，则按钮的操作从执行javascript代码（通过.click回调）切换为提交表单。 除了可能以某种方式未完全加载DOM以及以某种方式将底部的Submit按钮与同一表单内的另一个按钮混合在一起外，不知道为什么会这样。

此处显示的表单代码（可能不相关）：

<form action="../landing/" method="POST">
    {% csrf_token %}
    <div class="ac_container">
        <div class="ui-widget">
            <button class="add_field_button">Add More Fields</button>
            <label for="tagsnodes">Tags: </label>
            <input id="tagsnodes" oninput = "myfunc('tagsnodes')" name="mytext" value="initial"/>
        </div>
    </div>
    <br><br>
    <input type="submit" value="Submit">
</form>

无论如何，当我调用函数（包括.click回调）时，如下所示：

$(document).ready(extrainput("nodes"));

“ add_field_button”的功能保持不变。

extrainput（）函数：

function extrainput(extratype) {
            return function()
            {
                var max_fields      = 10; //maximum input boxes allowed
                var wrapper         = $(".ac_container"); //Fields wrapper
                var add_button      = $(".add_field_button"); //Add button ID

                var x = 1; //initlal text box count
                $(add_button).click(function(e){ //on add input button click
                    e.preventDefault();
                    if(x < max_fields){ //max input box allowed
                        x++; //text box increment
                        console.log("INSIDE");
                        var tid = "tags" + extratype + x
                        $(wrapper).append('<div class="ui-widget"><input id="'+tid+'" oninput = "myfunc(\'' + tid + '\')" name="mytext"/></div>');
                        myfunc(tid);
                    }
                });

                $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
                    e.preventDefault(); $(this).parent('div').remove(); x--;
                })
            }
        }

您会注意到，该函数被编写为返回一个匿名函数，因为那是document.ready需要的。 但是，我必须像这样调用extrainput函数。 如果我尝试这样称呼它：

$(document).ready(function(){
    extrainput("nodes");
});

我收到相同的DOM错误，就像我没有等待页面准备就绪一样。

再一次，我想以这种方式调用该函数，以便我可以调用“ nodes”和“ edges”。

myfunc代码：

function myfunc(tagid){
            try
            {
                var formData = {csrfmiddlewaretoken: "{{csrf_token}}", inputtext:document.getElementById(tagid).value};
            }
            catch (err)
            {
                var formData = {csrfmiddlewaretoken: "{{csrf_token}}", inputtext:""};
            }

            $.ajax({
                url: "../searchjson/",
                type: "post",
                data: formData,
                success: function(data){
                    var availableTags = data.replace(/"/g,"").replace('[','').replace(']','').replace(/, /g, ',').split(",");
                    $( "#"+tagid ).autocomplete({
                        source: availableTags
                    });
                },
                error:function(){
                    $("#result").html('There was error while submitting');
                }
            });
        }

Answer 1

这种调用方式是正确的，尽管您似乎尝试过。

function extrainput(extratype) {

    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".ac_container"); //Fields wrapper
    var add_button = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    add_button.click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            console.log("INSIDE");
            var tid = "tags" + extratype + x
            wrapper.append('<div class="ui-widget"><input id="' + tid + 
                              '" oninput = "myfunc(\'' + tid + '\')" name="mytext"/></div>');
            myfunc(tid);
        }
    });

    wrapper.on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })

}

$(document).ready(function () {
    extrainput("nodes");
});

我用这段代码做了一个jsfiddle。 缺少什么预期的行为？ 我似乎能够添加新的文本字段。

http://jsfiddle.net/mve9xzLx/1/

另外，由于您将add_button定义为

var add_button = $(".add_field_button");

您无需再次将其包装在$() ，但这无关。