.wrap（）;打破prevent.Default（）;

Question

我寫了一個自定義表單驗證腳本，但由於某種原因，在<div class="inputWrapper" />中包裝input[type=text]元素會阻止我阻止input[type=submit]的默認設置。

下面是相關代碼：

$("input[type=text]").wrap("<div class=\"inputWrapper\" />");

是打破：

$("input[type=submit]").click(function(event) { 
    event.preventDefault(); 
}); 

這究竟是爲什麼？如果你需要一個更完整的腳本，讓我知道，我會發布整個事情。

更新：好了，出於某種原因，禁用該行的代碼允許.preventDefault在input[type=submit]工作，但如果我只是用

// wrap inputs 

    $("input[type=text]").wrap("<div class=\"inputWrapper\" />"); 
    // validate on form submit 
    $("input[type=submit]").click(function(event) { 
     event.preventDefault(); 
    }); 

它工作正常。所以這是完整的腳本，可能會導致這種奇怪的現象？

$(document).ready(function() { 
     // wrap inputs 
     $("input[type=text]").wrap("<div class=\"inputWrapper\" />"); 
     $("textarea").wrap("<div class=\"inputWrapper\" />"); 
     // validate text inputs on un-focus 
     $("input[type=text].required").blur(function() { 
      if ($(this).hasClass("error")) { 
       // do nothing 
      } else if ($(this).val() === "") { 
       $(this).addClass("error"); 
       $(this).parent(".inputWrapper").append("<div class=\"errorPopup\">" + $(this).attr("placeholder") + "</div>"); 
      } 
     }); 
     // validate textareas on un-focus 
     $("textarea.required").blur(function() { 
      if ($(this).hasClass("error")) { 
       // do nothing 
      } else if ($(this).val() === "") { 
       $(this).addClass("error"); 
       $(this).parent(".inputWrapper").append("<div class=\"errorPopup\">" + $(this).attr("placeholder") + "</div>"); 
      } 
     }); 

     // validate on form submit 
     $("input[type=submit]").click(function(event) { 
      event.preventDefault(); 
      // check fields 

      $(this).parent("form").children("input.required").each(function() { 
      // check textboxes 

      if ($(this + "[type=text]")) { 
       if (!$(this).val()) { 
        $(this).addClass("error"); 
      }; 
      }; 

      // end textboxes 
    // check textareas 
      $(this).parent("form").children("textarea.required").each(function() { 
      if (!$(this).val()) { 
        $(this).addClass("error"); 
       }; 
      }); 

      // end textareas 
     // check checkboxes and radio buttons 
     if ($(this).is(":checkbox") || $(this).is(":radio")) { 
       var inputName = $(this).attr("name"); 
       if (!$("input[name=" + inputName + "]").is(":checked")) { 
        var inputId = $(this).attr("id"); 
      $("label[for=" + inputId + "]").addClass("error"); 
       }; 
      }; 

      // end checkboxes and radio buttons 
     }); 

     // end fields 
     // submit form 
     var errorCheck = $(this).parent("form").children(".error").length > 0; 
      if (errorCheck == 0) { 
       $(this).parent("form").submit(); 
      } else { 
       alert("You didn't fill out one or more fields. Please review the form."); 
       window.location = "#top"; 
      }; 
     // end submit form 
    }); 
    // clear errors 
    $("input.required").each(function() { 
     // clear textboxes 
      if ($(this + "[type=text]")) { 
       $(this).keypress(function() { 
        $(this).removeClass("error"); 
        $(this).next(".errorPopup").remove(); 
       }); 
      }; 
     // end textboxes 
     // clear textareas 
      $("textarea.required").each(function() { 
       $(this).keypress(function() { 
        $(this).removeClass("error"); 
        $(this).next(".errorPopup").remove(); 
       }); 
      }); 
     // end textareas 
     // check checkboxes and radio buttons 
      if ($(this).is(":checkbox") || $(this).is(":radio")) { 
       var inputName = $(this).attr("name"); 
       var labelFor = $(this).attr("id"); 
       $(this).click(function() { 
        $("input[name=" + inputName + "]").each(function() { 
         var labelFor = $(this).attr("id"); 
         $("label[for=" + labelFor + "]").removeClass("error"); 
        }); 
       }); 
      }; 
     // end checkboxes and radio buttons 
    }); 
    // end clear textbox errors 
}); 

更新2：好的，我錯了問題是什麼。它與我認爲的相關，但是在包裝輸入後發現.error實際上存在問題。

這裏的問題所在：

var errorCheck = $(this).parent("form").children(".error").length > 0;

Answer 1

var errorCheck = $(this).parent("form").children(".error").length > 0; 

當你.wrap文本輸入，他們不再是形式的孩子。使用.find

順便說一下，$(this + "selector")無效。你可能想要使用$(this).is("selector")

Answer 2

您將需要某種新的DOM元素保持基準。這將首先把它作爲一個初始化的DOM元素的變量（而不是像你一樣的字符串）與同爲原始的元素，這將是回，使其能夠維持事件：

var $inputWrapper = $("<div class=\"inputWrapper\" />"), 
    $inputText = $("input[type=text]"); 
$inputText.wrap("<div class=\"inputWrapper\" />"); 

然後您可以在更換元件回來。