运行 html 在 js 函数中点击事件

Question

我想在这个 swal 警报中添加表单，样式简单，像这样 form example

<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>

Answer 1

您的 'list'（包含 html 元素）变量应该在 html 中，而不是在我的代码片段中显示的文本中。此外，您正在使用 Bootstrap 的输入 class，所以我认为如果您想实现此目的，您还可以添加 bootstrap 和 font-awesome 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>

希望对您有所帮助！ :)

Answer 2

我猜你的意思是你没有看到你的 html 是对的。这是因为 sweetalert 有一个 CSS class 叫做 .sweet-alert input。它具有 display:none; 属性，只有在您更改 swal 类型时才会消失。但在你的情况下，只需用 display:block 或 inline-block.

定义一个新的 class

注意：顺便说一句，这是针对原始 sweetalert 的，而不是 Sweetalert2。

PS：如果您下次告诉我们到底是什么不起作用，将会很有帮助。

运行 html 在 js 函数中点击事件

Run html inside js function on click event

html

javascript

jquery

sweetalert