Javascript 下拉选择条件下的警报

当下拉列表中的值为“0”且用户尝试单击“添加另一个计划”按钮时，我尝试使用alertify库弹出警报。由于某种原因，警报没有出现

alertify库的JS运行良好，正如我在其他场景中测试的那样，它确实会弹出，但由于某些原因，在这个场景中它不起作用

HTML:

<select id="myselect" class="dropdown">
                <option value="0">Please Select Your Plan</option>
                <option value="1">package1</option>
                <option value="2">package2</option>
                <option value="3">package3</option>
                <option value="4">package4</option>
                <option value="5">package5</option>
                <option value="6">package6</option>
            </select>

    <div class="button-plan"><input type="button" value="Add another plan to enjoy more savings!" class="button-hide" /></div>

$('#myselect').change(function () {
        var val = $(this).val();

        if (val =='0'){
            $(".button-hide"). on (" click " ,function(){
            alertify.alert("You need to atleast select one plan !");                        
            });
                                    }

小提琴在这里可以买到：

---

非常感谢你们的帮助

仅当按下按钮时，才尝试检查select的值：

$(".button-hide").on(" click " ,function(){
    if($('#myselect').val()==0)
        alertify.alert("You need to atleast select one plan !");                        
});

---

当前，绑定和检查的顺序错误（目前，每次用户选择选项时，都会将“单击”事件绑定到按钮。因此，在用户首次选择选项之前，不会绑定任何单击逻辑）

首先绑定“点击”事件逻辑并检查其中的当前列表值：

$(".button-hide").on("click" ,function(){
    if ($('#myselect').val() == '0') {
        alertify.alert("You need to atleast select one plan !");
    }                        
});

---

如果select更改为第一个选项，则脚本将向按钮添加事件处理程序。不管怎样，您都应该添加按钮事件处理程序，并改为选中下拉列表值

$(".button-hide").on("click" ,function() {
    var val = $("#myselect").val();
    if (val === "0") {
        alertify.alert("You need to atleast select one plan !");                        
    }
});

---

感谢您在@C-link上的评论，不过您能否详细说明一下呢？对不起，我试过了，但没有成功。至于alertify。@C-link事件委派与问题无关。OP希望使用alertify@C-link我在检查时删除了它，只是重新添加了它。谢谢。这有太多的错误。按钮的事件处理程序分配不正确，您正在对不存在的对象调用

preventDefault（）

方法。而且，它只是一个按钮——它不会在任何地方提交表单，所以这根本不相关。

$('#myselect').change(function (e) {
        var val = $(this).val();

        if (val =='0'){

            $(".button-hide"). on (" click " ,function(){
            alertify.alert("You need to atleast select one plan !");    
                e.preventDefault();
            });
        }});

 simply try the code as written below:

    $(".button-hide"). on ("click" ,function(){
         if($('#myselect').val()=="0")
        alertify.alert("You need to atleast select one plan!");  
    });