Question

所以我有一段代码，绝对依赖于DOM，需要在页面加载后执行;如果不是，则按钮的动作从执行javascript代码（通过.click回调）切换到提交表单。不知道为什么会发生这种情况除了可能以某种方式DOM没有完全加载，并且底部的提交按钮与同一表单中的另一个按钮混合在一起。

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

<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错误，就像我没有等待页面准备好一样。

再次，我想以这种方式调用该函数，以便我可以，例如，调用“节点”和调用“边缘”。

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

您不需要再次将其包裹在$()中，但这是无关的。

在Javascript的document.ready Handler中多次调用一个函数

1 个答案: