js函數內部運行HTML上單擊事件

我想與風格，簡單的表單添加表單這SwaI位警報裏面這樣form example js函數內部運行HTML上單擊事件

<div id="centerprize" style="display: ;"> 
    <a href='#' class="modal-btnprize">Win Prize</a> 
</div> 

<script type="text/javascript"> 
    $(".modal-btnprize").click(function() { 
     var list='<div class="form-group">'+'<label for="InputName">YourName</label>'+ 
     '<div class="input-group">'+ 
     '<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>'+ 
     '<span class="input-group-addon"><i class="fa fa-twitter"></i></span></div>'+ 
     '</div>' 
     swal({ 
      title: "Eligibility Criteria", 
      allowOutsideClick:true, 
      text: list, 
      html:true, 
     }); 
    }); 
</script>

來源

2017-05-31 ash

實際上，您的列表變量聲明後省略了分號 –

你的「名單」（包含HTML元素）變量應該是在HTML和不在我的代碼片段中顯示的文字中。此外，您正在使用引導的輸入級，所以我想，如果你想要實現這個 form

您還可以在swal更新您還可以添加自舉和字體真棒。

$(".modal-btnprize").click(function() { 
 
     var list='<div class="form-group">'+'<label for="InputName">YourName</label>'+ 
 
     '<div class="input-group">'+ 
 
     '<input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>'+ 
 
     '<span class="input-group-addon"><i class="fa fa-twitter"></i></span></div>'+ 
 
     '</div>' 
 
     
 
     swal({ 
 
      title: "Eligibility Criteria", 
 
      allowOutsideClick:true, 
 
      text: 'Not html here', 
 
      html: list, 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.4/sweetalert2.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.4/sweetalert2.css"> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous"> 
 

 

 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div id="centerprize" style="display: ;"> 
 
    <a href='#' class="modal-btnprize">Win Prize</a> 
 
</div>

希望這有助於！ :)

來源

2017-05-31 09:26:39

感謝解決方案兄弟你能解釋一下我哪裏出了錯 – ash

'SwaI位（{ 標題列表的部分：「資格標準」， allowOutsideClick：真， text：'Not html here'， html：list， }）; '正如你在這裏看到的，**列表**被放入'html'而不是'text'，我認爲'text'只支持文本格式，例如而不是'html'元素，比如'input type' –

我想你的意思是你沒有看到你的html正確。這是因爲sweetalert有一個名爲.sweet-alert input的CSS類。這具有屬性display：none;只有在更改swal類型時纔會消失。但在你的情況下，只需定義一個新類display:block或inline-block。

注意：這是原來sweetalert的方式，而不是Sweetalert2。如果你讓我們知道什麼是不工作的，那麼下一次它會很有幫助。

來源

2017-05-31 09:27:10 hallleron

js函數內部運行HTML上單擊事件

回答

相關問題