在DOM加载后validationbootstrap模态forms和模态加载
在主要问题之前我想描述我的网站的文件结构以获得更好的概述。 我的网站中有很多页面，它通过我的index.php动态添加，这里是index.php的代码
在我的页面文件夹中我有超过150页，有些页面有按钮触发引导程序3.3.7的模态，在同一页面我有半个代码的模态剩余代码来自php页面，我将在稍后向您展示我的一个页面的代码，其中包含按钮和模态的一半代码。
<button id="" type="button" class="btn-verified complaintId" style="color:#000; background: none; border: none;" data-toggle="complaintmodal"> Report
当用户单击按钮时，它会触发模态，同时我运行我的jquery函数，通过ajax加载模态的剩余内容。 在我的custom.js文件中，我有这个代码。
$('.complaintId').on('click',function(){ complaintid=(this.id); $.ajax({ method: 'POST', url: 'complaintmodalshow.php', data: {id:complaintid}, success: function(data){ $(".cbgoverlay").html(data); $('#complaintModal').modal({ show:true }); } }); });
从这里我加载模态的剩余模态代码，因为我需要从数据库填充它，这里是complaintmodalshow.php的代码
setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $id = trim($id); $id = stripslashes($id); $id = htmlspecialchars($id); $id = (int)$id; $query = "SELECT dou.businessName, dou.businessAddress, wp.discount, wp.dealitem, wp.expirydate, wp.description, m.* FROM dineOwnerUser AS dou INNER JOIN webpromo AS wp ON dou.id = wp.ownerid INNER JOIN menu AS m ON dou.id = m.ownerid WHERE dou.id = ?"; $statement = $db->prepare($query); $statement->execute(array($id)); $result = $statement->fetch(PDO::FETCH_ASSOC); echo""; echo""; echo"Report to ".$result['businessAddress']."
"; echo""; echo""; echo""; echo""; echo""; } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } $db = null; exit; } ?>
我确实从这个网站上读了很多答案，但我找不到答案。 在我的custom.js这是外部文件，我有自己的validation插件，并且可以正常使用其他页面，但不validation这个引导模式，我认为原因是这个模态在DOM加载后加载或者它可能来自php页面，这就是它发生的原因。 有人可以帮助我如何从custom.js文件validation它，因为我没有得到任何错误，似乎这个模态根本不存在但是这个模式渲染完美只有validation不起作用。 当我将validation代码放在同一页面（complaintmodalshow.php）时，它工作正常。 我不想这样做，我想把我所有的js编码放在一个地方。 有人可以建议我更好的解决方案吗？ 这是我的validation代码，仅用于更好的概述。
"use strict"; $(document).ready(function(){ function showerror(errbox, errcontent){ if($(errbox).hasClass("hidden")){ $(errbox).removeClass("hidden"); $(errbox).html(errcontent); } } function hideerror(errbox, errcontent){ if(!$(errbox).hasClass("hidden")){ $(errbox).html(errcontent); $(errbox).addClass("hidden"); } } (function ($){ $.fn.alphanumericspace = function(element, errbox){ var alphanumericspace = /^[a-zA-Z 0-9.,]*$/; /*test, true if matches otherwise false*/ if(!alphanumericspace.test(element)){ errcontent = "Only alphabets, numbers, dot, comma are allowed."; showerror(errbox, errcontent); } if(alphanumericspace.test(element)){ if(element != " " && element.length>0){ errcontent = ""; hideerror(errbox, errcontent); return "no error"; } } } function keepcheckingemail(element, errbox){ var emailfilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; /*test, true if matches otherwise false*/ $("#email").keyup(function(){ if(!emailfilter.test(element)){ errcontent = "invalid email"; showerror(errbox, errcontent); } if(emailfilter.test(element)){ if(element != " " && element.length>0){ errcontent = ""; hideerror(errbox, errcontent); return "no error"; } } }); } $.fn.emailfil = function(element, errbox){ var emailfilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; /*test, true if matches otherwise false*/ if(!emailfilter.test(element)){ errcontent = "invalid email"; showerror(errbox, errcontent); $("#email").focus(); keepcheckingemail(element); } if(emailfilter.test(element)){ if(element != " " && element.length>0){ errcontent = ""; hideerror(errbox, errcontent); return "no error"; } } } }(jQuery)); $("#complaintAbout").keyup(function(){ alert("complaintAbout"); complaintAbout = $("#complaintAbout").val(); errbox = $("#complaintAbouterrbox"); complaintAbouterr = $(this).alphanumericspace(complaintAbout, errbox); if(complaintAbouterr === "no error"){ complaintAbouterr = "no"; } }); $("#complaintDetail").keyup(function(){ complaintDetail = $("#complaintDetail").val(); errbox = $("#complaintDetailerrbox"); complaintDetailerr = $(this).alphanumericspace(complaintDetail, errbox); if(complaintDetailerr === "no error"){ complaintDetailerr = "no"; } }); $("#complainerEmail").focusout(function(){ complainerEmail = $("#complainerEmail").val(); errbox = $("#complainerEmailerrbox"); complainerEmailerr = $(this).emailfil(complainerEmail, errbox); if(complainerEmailerr === "no error"){ complainerEmailerr = "no"; } }); });
好吧所以我已经弄明白问题是什么，我将回答我自己的问题以防万一其他人正在寻找这个解决方案：
问题：问题是我的引导模式是在DOM加载后加载，因为我正在使用php这个和这个模态在某些情况下加载，你可以在我的问题中看到，这意味着我的validation插件在此模态之前加载所以插件是无法validation这一点。 为了实现所需的解决方案，我必须将选择器提供给jquery，当js文件加载时应该已经存在，所以我稍微更改了我的函数并添加了一行，如下所述
$(".cbgoverlay").on("click", function (){ //old plugin puts inside });
现在这里是主要的技巧这个类“cbgoverlay”已经存在，当我的页面加载和其余的模态编码将在稍后，所以当用户点击模态这个function将首先运行，然后内部function将选择呈现或加载的元素稍后通过php页面。 要理解这个逻辑，你必须正确地阅读我的整个问题。 最终的解决方案就在这里。
"use strict"; $(document).ready(function(){ /*complaint modal starts*/ var complaintid, complaintAbout, errbox, complaintAbouterr, errcontent, complaintDetail, robotError, complaintDetailerr; var complainerEmail, complainerEmailerr, recaptcha; $('.complaintId').on('click',function(){ complaintid=(this.id); $.ajax({ method: 'POST', url: 'complaintmodalshow.php', data: {id:complaintid}, success: function(data){ $(".cbgoverlay").html(data); $('#complaintModal').modal({ show:true }); } }); }); function showerror(errbox, errcontent){ if($(errbox).hasClass("hidden")){ $(errbox).removeClass("hidden"); $(errbox).html(errcontent); } } function hideerror(errbox, errcontent){ if(!$(errbox).hasClass("hidden")){ $(errbox).html(errcontent); $(errbox).addClass("hidden"); } } (function ($){ $.fn.alphanumericspace = function(element, errbox){ var alphanumericspace = /^[a-zA-Z 0-9.,]*$/; /*test, true if matches otherwise false*/ if(!alphanumericspace.test(element)){ errcontent = "Only alphabets, numbers, dot, comma are allowed."; showerror(errbox, errcontent); } if(alphanumericspace.test(element)){ if(element != " " && element.length>0){ errcontent = ""; hideerror(errbox, errcontent); return "no error"; } } } function keepcheckingemail(element, errbox){ var emailfilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; /*test, true if matches otherwise false*/ $("#email").keyup(function(){ if(!emailfilter.test(element)){ errcontent = "invalid email"; showerror(errbox, errcontent); } if(emailfilter.test(element)){ if(element != " " && element.length>0){ errcontent = ""; hideerror(errbox, errcontent); return "no error"; } } }); } $.fn.emailfil = function(element, errbox){ var emailfilter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; /*test, true if matches otherwise false*/ if(!emailfilter.test(element)){ errcontent = "invalid email"; showerror(errbox, errcontent); $("#email").focus(); keepcheckingemail(element); } if(emailfilter.test(element)){ if(element != " " && element.length>0){ errcontent = ""; hideerror(errbox, errcontent); return "no error"; } } } }(jQuery)); $(".cbgoverlay").on("click", function (){ $("#complaintAbout").keyup(function(){ complaintAbout = $("#complaintAbout").val(); errbox = $("#complaintAbouterrbox"); complaintAbouterr = $(this).alphanumericspace(complaintAbout, errbox); if(complaintAbouterr === "no error"){ complaintAbouterr = "no"; } }); $("#complaintDetail").keyup(function(){ complaintDetail = $("#complaintDetail").val(); errbox = $("#complaintDetailerrbox"); complaintDetailerr = $(this).alphanumericspace(complaintDetail, errbox); if(complaintDetailerr === "no error"){ complaintDetailerr = "no"; } }); $("#complainerEmail").focusout(function(){ complainerEmail = $("#complainerEmail").val(); errbox = $("#complainerEmailerrbox"); complainerEmailerr = $(this).emailfil(complainerEmail, errbox); if(complainerEmailerr === "no error"){ complainerEmailerr = "no"; } }); }); /*complaint modal ends*/ });
通过使用此代码，您将能够从问题上面提到的php页面加载模态，您也可以validation表单。 祝好运。 保持学习。