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

Question

So I have a piece of code that most definitely relies on the DOM and needs to be executed after the page has loaded; if its not, a button's action is switched from performing javascript code (through a .click callback) to submitting the form. No idea why this is happening besides maybe somehow the DOM hasn't fully loaded and somehow the submit button at the bottom is mixed up with this other button inside the same form.

Form code shown here (probably irrelevant):

<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>

Anyway, when I call my function (which includes the .click callback) like so:

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

the functionality of the "add_field_button" remains the same.

The extrainput() function:

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

As you will notice, the function is written to return an anonymous function since that is what the document.ready takes. I have to call the extrainput function like this, however. If I try to call it like this:

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

I get the same DOM error as if I had not waited for the page to be ready.

Once again, I would like to call the function in this way so that I could, say, make a call to "nodes" and a call to "edges."

myfunc code:

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

This way of calling it is correct, though it seems like you tried it.

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

I made a jsfiddle with this code. What is the expected behavior which is missing? I seem to be able to add new text fields.

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

Also, since you define add_button as

var add_button = $(".add_field_button");

you don't need to wrap it in $() again, but that is unrelated.