动态插入div

前台页面的div个数根据后台动态的增加.

function callBack(data) {

    jQuery.each(data.result.financeList, function (i, item) {
        var $invest = $("#invest");  -------1
        $invest.append($("#ppb_temp").html());-------2
        var $lastDiv = $invest.find(".ppb_item:last-child");
        $lastDiv.attr("data-id", item.id);
        $lastDiv.find(".deadline").text(item.deadline);
        $lastDiv.find(".annualRate").text(item.annualRate);
        $lastDiv.find(".id").text(item.id);
        idArr.push(item.id);

    });

callBack:是ajax请求成功的回调. 使用jQuery.each作循环.financeList后台Json穿过来的list字段.

数据类型是List<Map<String,Object>> 

1和2实现了动态插入div的功能.后面实现了随后台动态改变数据的需求.

需要注意的是模版div要写在<script></script>里面,例:

<script type="text/html" id="ppb_temp" class="ppb_temp_class">
    <div style="border-top:1px solid #e1c382;width:6.75rem;position:relative;
" class="ppb_item">
        <div style="height:0.2rem;  ">
    <span style="position:absolute;left:0rem;top:0.5rem; ">
        <span>期限</span>&nbsp;&nbsp;<span
            class="deadline">328</span>&nbsp;<span>天</span></span>
            <span style="position:absolute;left:2.15rem;top:0.5rem; ">
                <span>返现金额</span>&nbsp;&nbsp;<span
                    class="returnAmount yanse5 size30">10000</span>
                &nbsp;<span>元</span></span>
        </div>
        <div style="margin-bottom:1.65rem;" class="yanse6">
            <span style="position:absolute;left:0rem;top:1.063rem; ">
                <span>预期年化</span>&nbsp;&nbsp;<span
                    class="annualRate">8.00</span><span>%</span></span>
            <span style="position:absolute;left:2.15rem;top:1.06rem; ">
                <span>预期收益</span>&nbsp;&nbsp;<span
                    class="expectedRevenue">728008.89</span><span>元</span></span>
        </div>
        <a class="investment size30 yanse3 centerx"
           style="display:inline-block;background: url(img/niu.png) center no-repeat;
           background-size: 100% 100%;height:1rem;line-height:1rem;width:1.78rem; 
           position:absolute;right:-0.03rem;top:0.42rem; "
           href="">
            立即投资
        </a>
        <span style="display: none" class="id"></span>
    </div>
</script>

2.若要实现输入金额改变动态改变返现金额

$(function () {
    $("#calculator").on("input", changeNum);
    //input输入框
    function validateNum(val) {
        if (!val.match(/^\d{1,8}$/) && val !== "") {
            alert("最多输入8位数字！");
            return false;
        } else {
            return true;
        }
    }

    function changeNum(e) {
        var $tar = $(e.currentTarget);
        //校验验证码
        num = $tar.val();
        if (validateNum(num)) {

            for (var i = 0; i < idArr.length; i++) {
                var $ppbItem = $(".ppb_item[data-id=" + idArr[i] + "]");//找到对应的div
                $ppbItem.find(".returnAmount").text());
                $ppbItem.find(".expectedRevenue").text();
            }
        }
    }
})

3.点击投资要跳到另外一个页面:

$(".investment").on("click", function (e) {
    e.preventDefault();----1
    var $tar = $(e.currentTarget);//当前点击的按钮
    var $parent_ppb_item = $tar.parents(".ppb_item");
    var id = $parent_ppb_item.attr("data-id");
  
})

1是为了去除默认的点击函数.

这个点击事件位置要放在生成的div的后面,否则不会生效.