在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");

您無需再次將其包裝在$() ，但這無關。