Question

每当用户选择表格行中的复选框并单击“保存”时，它将生成一个容器，该容器将以所选行的特定格式保存数据。

注意：数据来自JSON。

同样，用户还可以选择通过表单手动将数据添加到同一容器中。

现在，我将所有这些容器或数据持有者附加到dom中的父容器中。

我需要交换这些数据容器，这是迄今为止我已经实现的。但是，第一个容器和最后一个容器的按钮不会被禁用或隐藏。

这是我的剧本

<script>
    function getData(){
        $('input[name="articles"]:checked').map(function() {    
            var content =  JSON.parse(decodeURIComponent(this.value));
            content+= '<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Name:</label><div class="col-md-8 article-data">'+name+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';                                     
            $('.box').html(content);
        });
        $('.remove').click(function(){
            $(this).parents('.parent').remove();
        });             
        resetEvents();
    }
function addName(){
    var name= $("#articleTitle").val();
    content +='<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Name:</label><div class="col-md-8 article-data">'+Count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';
        $('.box').html(content);
        $('.removeArticle').click(function(){
        $(this).parents('.parent').remove();
    });

}
function handleEvents() {
    $(".top-btn, .down-btn").prop("disabled", false).show();    
    $(".parent:first").find(".top-btn").prop("disabled", true).hide();    
    $(".parent:last").find(".down-btn").prop("disabled", true).hide();
}
function resetEvents() {    
    $(".top-btn, .down-btn").unbind('click');    
    handleEvents();                 
    $('.down-btn').click(function() {
        var toMove1 = $(this).parents('.article-box');   
        $(toMove1).insertAfter($(toMove1).next());   
        handleEvents();
    });   
    $('.top-btn').click(function() {
        var toMove1 = $(this).parents('.article-box');
        $(toMove1).insertBefore($(toMove1).prev());
        handleEvents();
    });
}
</script>

第一个数据持有者不会有一个顶级的交换。因此，应禁用或隐藏顶部按钮。

同样，最后一个数据持有者也没有可以交换的数据持有者。因此，应禁用或隐藏向下按钮。

我无法理解我写的内容有什么问题？

注意：如果我使用硬编码数据持有者而不是在运行时生成它，那么这种方法非常好。

Answer 1

对于动态生成的元素，请使用如下的委托事件处理程序：

$("body").on("click", selector, function() {
     //actions to do
});

Answer 2

您需要添加delegated listener。

$('NearestParentElementThatAppearsOnPageLoad').on('event', 'ElementToApplyListenerTo', function() {
  // Do something
});

Answer 3

这是完整的代码。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
        <style>
            .parent {
                height: 25%;
                width: 90%;
                padding: 1%;
                margin-left: 1%;
                margin-top: 1%;
                border: 1px solid black;

            }

            .parent:nth-child(odd){
                background: skyblue;
            }

            .parent:nth-child(even){
                background: green;
            }

            .disabled-btn {
              cursor: not-allowed;
              opacity: 0.25%;
            }

        </style>
    </head>
    <body>
        <button class="btn btn-primary" onclick="getData()">Get data</button>
        <form>
            <label>Count: </label>
            <input type="text" placeholder="enter a count" id="mycount">
            <button onclick="saveData()">Submit</button>
        </form>
        <div class="box">

        </div>



    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var content = "";

        function getData(){

                for(var count=0; count<4; count++){

                content+= '<div class="container parent"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

                }
                $('.box').html(content);

            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });


            resetEvents();
        }

        function saveData(){
            var count = $("#mycount").val();
            content+= '<div class="container parent"><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

            $('.box').html(content);
            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });
        }

        function handleEvents() {
                $(".top-btn, .down-btn").prop("disabled", false).show();
                $(".parent:first").find('.top-btn').attr('disabled','disabled');

                $(".parent:first").find(".top-btn").prop("disabled", true).hide();


                $(".parent:last").find(".down-btn").prop("disabled", true).hide();
            }


            function resetEvents() {

                $(".top-btn, .down-btn").unbind('click');

                handleEvents();

                $('.down-btn').click(function() {
                    var toMove1 = $(this).parents('.parent');

                    $(toMove1).insertAfter($(toMove1).next());

                    handleEvents();
                });

                $('.top-btn').click(function() {
                    var toMove1 = $(this).parents('.parent');

                    $(toMove1).insertBefore($(toMove1).prev());
                    handleEvents();
                });

            }


    </script>
    </body>
</html>


            resetEvents();
        }

        function saveData(){
            var count = $("#mycount").val();
            content+= '<div class="container parent><div class="row article-row"><div class="col-md-6 article data-col"><div class="row"><form class="form-horizontal"><div class="form-group"><label class="control-label col-md-4">Count:</label><div class="col-md-8 article-data">'+count+'</div></div></form></div></div><div class="col-md-6 article btn-col"><div class="row del-btn"><button class="btn btn-danger remove-btn">Delete &nbsp;<span class="glyphicon glyphicon-remove"></span></button></div><div class="row updown-btn"><div class="btn-group"><button class="btn btn-primary btn-sm top-btn"><span class="glyphicon glyphicon-arrow-up"></span></button><button class="btn btn-primary btn-sm down-btn"><span class="glyphicon glyphicon-arrow-down"></span></button></div></div></div></div></div>';

            $('.box').html(content);
            $('.remove-btn').click(function(){
                $(this).parents('.parent').remove();
            });
        }

        function handleEvents() {
                $(".top-btn, .down-btn").prop("disabled", false).show();
                $(".parent:first").find('.top-btn').attr('disabled','disabled');

                $(".parent:first").find(".top-btn").prop("disabled", true).hide();


                $(".parent:last").find(".down-btn").prop("disabled", true).hide();
            }


            function resetEvents() {

                $(".top-btn, .down-btn").unbind('click');

                handleEvents();

                $('.down-btn').click(function() {
                    var toMove1 = $(this).parents('.parent');

                    $(toMove1).insertAfter($(toMove1).next());

                    handleEvents();
                });

                $('.top-btn').click(function() {
                    var toMove1 = $(this).parents('.parent');

                    $(toMove1).insertBefore($(toMove1).prev());
                    handleEvents();
                });

            }


    </script>
    </body>
</html>

在jquery

3 个答案: