在JavaScript的document.ready處理器中多次調用一個函數Handler

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> 

無論如何，當我把我的功能（包括。點擊回調），像這樣：

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

你不需要重新包裝在$()，但是這是不相關的。