Question

当用户点击div class =“day”时，我想创建一个新的div id =“list_1 class =”行列表“并仅在div class =”row“之后插入它，这是div的父级” ·天”。

为此，我尝试应用'insertAfter'，选择'this'和'parent'。但是，它不能很好地工作。

jquery文件

function getDailyList(){  
    $.ajax({
        url: "/getDailyList",
        dataType: 'JSON',
        success: function(data){
            string = '<div id="list_1" class="row list">'
                +'<div class="col-md-8 col-md-offset-2" style= "border: 1px solid gold; background-color: black; padding: 10px">';
            if(data.event_list.length == 0){  
            return false              
            }
            else{
                for(var idx in data.event_list){
                    event_ = data.event_list[idx];
                    string = string + '<p class="text-left" style="color: white">' + event_['title'] + '</p>'; 
                }
            }
            string = string + '</div></div>';
            $(string).insertAfter('.row');  
           return false
        },
    });
    console.log('out');
}

$(document).ready(function(){
    $('.day').click(function(){
        //date = datetime.date()
        console.log('-------');
        if($(".list").css("display") == "block"){
            $(".list").remove();
        }
        else{
            getDailyList();
        }
        console.log('last');
    });
})

html文件

<!DOCTYPE html>
<html>
<head>
  <title>D.Han</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="static/js/base.js"> </script>

</head>
<body>
  <div class="row">
    <div id="day1" class="day col-md-4 col-md-offset-2" data-cal-date ="2014-08-14" style="border: 1px solid gold">
      <p class="text-center">2014.08.26</p>
    </div>
    <div id="day2" class="day col-md-4" style="border: 1px solid gold">
     <p class="text-center">2014.08.27</p>
   </div>
 </div>

<div class="row">
  <div id="day3" class="day col-md-4 col-md-offset-2" style="border: 1px solid gold">
    <p class="text-center">2014.09.03</p>
  </div>
  <div id="day4" class="day col-md-4" style="border: 1px solid gold">
   <p class="text-center">2014.09.04</p>
 </div>
</div>

</body>
</html>

Answer 1

你有一些丢失的分号，一个额外的冒号（它会破坏IE中的script）你的function getDailyList()不知道实际点击了哪个元素。

这应该这样做：

function getDailyList(el) {
    // Try to rename this variable. It's not a good idea to name a variable
    // using a type.
    // We declare it here so we can concatenate bits later.
    var string = "";

    $.ajax({
        url: "/getDailyList",
        dataType: 'JSON',
        success: function (data) {
            string = '<div id="list_1" class="row list"><div class="col-md-8 col-md-offset-2" style= "border: 1px solid gold; background-color: black; padding: 10px">';

            if (data.event_list.length === 0) {
                return false;
            } 
            else {
                for (var idx in data.event_list) {
                    event_ = data.event_list[idx];

                    // string = string + '' can be written like this.
                    string += '<p class="text-left" style="color: white">' + event_['title'] + '</p>';
                }
            }

            string += '</div></div>';

            // The function knows which element has been clicked,
            // so we just insert the new element after its parent.
            $(string).insertAfter(el.parents('.row'));

            return false;            
        } // Removed the extra colon after the bracket.
    });

    console.log('out');
}

$(document).ready(function () {
    $('.day').click(function () {
        //date = datetime.date();
        console.log('-------');

        if ($(".list").css("display") == "block") {
            $(".list").remove();
        } 
        else {
            // Pass which element has been clicked to the function
            // we are calling.
            getDailyList($(this));
        }

        console.log('last');
    });
});

Demo (without AJAX - for testing)

Answer 2

将点击的“日期”传递给您的追加电话

getDailyList(this.parentNode);

然后

function getDailyList(rowElement){

和

$(string).insertAfter(rowElement);

希望把它放在哪里是有道理的，我还创建了一个fiddle（带有虚拟的ajax url和逻辑）

在此元素的父元素之后插入字符串

2 个答案: