Question

您可以在以下位置查看演示

http://demo.m.moneylife.in/events/advisor2/pricing/

单击下一个按钮可以正常工作，但是单击上一个编辑时。使元素处于活动状态不起作用课。

我刚刚添加了要检查的警报

JQUERY

$(document).ready(function(e) {
    $("button.previous").each(function(e) {
        $(this).click(function(e) {
            alert(90);
        });
    });
    $("button.next").each(function(e) {
        $(this).click(function(e) {
            $(this).parent().next("li").addClass("active");
            $(this).addClass("previous");
            $(this).html('<img src="images/edit.svg" />');
            $(this).addClass("collapsed");
            $(this).removeClass("next");
            $(this).parent().addClass("entered");
            $(this).parent().removeClass("active");
            $(this).parent().next("li").addClass("complete");
        });
    });
});

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Pricing</title>
    <link rel="stylesheet" type="text/css" href="css/pricing.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery- 
    3.3.1.min.js"></script>
    <script type="text/javascript" src="js/pricing.js"></script>
</head>

<body>
    <div class="container">
        <ul>
            <li class="first active">
                <input type="button" name="" class="next" value="next" />
            </li>
            <li class="second">
                <input type="button" name="" class="next" value="next" />
            </li>
            <li class="third">
                <input type="button" name="" class="next" value="next" />
            </li>
            <li class="fourth">
                <input type="button" name="" class="next" value="next" />
            </li>
            <li class="fifth">
                <input type="button" name="" class="next" value="next" />
            </li>
            <li class="sixth">
                <input type="button" name="" class="next" value="next" />
            </li>
        </ul>
    </div>
</body>

</html>

Answer 1

在加载文档时，您将使用previous类绑定到所有按钮。那时还没有。以后添加类不会绑定它们。您应该将previous绑定到一个函数，并在单击next按钮时调用它。

未经测试的代码：

function doBinding(){
    $('button.previous').each(function(e){ 
        $(this).click(function(e){
            alert(90);
        });
    });
};
$(document).ready(function(e){   
    $('button.next').each(function(e){ 
        $(this).click(function(e){
        $(this).parent().next('li').addClass('active');
        $(this).addClass('previous');
        $(this).html('<img src="images/edit.svg"/>')
        $(this).addClass('collapsed')
        $(this).removeClass('next');
        $(this).parent().addClass('entered')
        $(this).parent().removeClass('active');
        $(this).parent().next('li').addClass('complete');
        doBinding();
    });
});

Flexbox不会触发点击事件

1 个答案: