.css效果在ajax響應(yīng)后未應(yīng)用

Question 1

我試圖在ajax成功響應(yīng)之后應(yīng)用jquery.css效果。我想這不起作用，因?yàn)槲覐淖罱傻脑刂蝎@取高度，然后將其應(yīng)用到另一個(gè)最近生成的元素。我嘗試將.opts div移到底部，基于.col-4div的高度，這是動(dòng)態(tài)的。

這是鋼筆：https://codepen.io/Pancuatico/pen/abpOeZy

當(dāng)您打開(kāi)pen時(shí)，您可以在控制臺(tái)中應(yīng)用以下代碼：$(".opts").css("margin-top",$(".col-4").height());，您將看到它工作得非常完美，但是，在ajax成功響應(yīng)之后，如何正確地使它工作呢？

Edit

我將把我的js代碼放在這里，這樣你就可以看到我的錯(cuò)誤在哪里了。

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("anurl.php",function(data){

        //Some process with the data here
        //...

        var out = "<div class='col-4'><img src='imgpathalt' alt='imgpath'></div>";
        out += "<div class='col-2'>";
            out += "<img src='imgpath2' alt='imgpath2alt'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);
        var col4Height = $(".col-4").height();
        $(".opts").css("margin-top",col4Height); //this does not work
    });
}

Question 2

原因是，當(dāng)您添加該元素的margin-top時(shí)，圖像仍在加載。所以.col-4的高度只是當(dāng)時(shí)按鈕的大小。您必須等待圖像加載完畢，然后將邊距更新為.col-4的高度。

一個(gè)更好的方法是動(dòng)態(tài)地創(chuàng)建元素，而不是將其作為html放入字符串中。這樣就可以用-

myImage.load(imgLoaded);

更新圖像后的邊距是loaded-

function imgLoaded() {
$(".opts").css("margin-top", $(".col-4").height();); 
}

但是，您可以在具有htmlonload屬性的代碼中獲得結(jié)果。

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",function(data){

        //...
        //Some process with the data here
        //Im just using that url for testing purposes
        //...

        var out = "<div class='col-4'><img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa' onload='imgLoaded()'></div>";
        out += "<div class='col-2'>";
            out += "<img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);

    });
}

function imgLoaded() {
    $(".opts").css("margin-top", $(".col-4").height();); 
}

Answer 1

原因是，當(dāng)您添加該元素的margin-top時(shí)，圖像仍在加載。所以.col-4的高度只是當(dāng)時(shí)按鈕的大小。您必須等待圖像加載完畢，然后將邊距更新為.col-4的高度。

一個(gè)更好的方法是動(dòng)態(tài)地創(chuàng)建元素，而不是將其作為html放入字符串中。這樣就可以用-

myImage.load(imgLoaded);

更新圖像后的邊距是loaded-

function imgLoaded() {
$(".opts").css("margin-top", $(".col-4").height();); 
}

但是，您可以在具有htmlonload屬性的代碼中獲得結(jié)果。

$(document).ready(function(){
    loadImgs();
});

function loadImgs(){
    $.post("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",function(data){

        //...
        //Some process with the data here
        //Im just using that url for testing purposes
        //...

        var out = "<div class='col-4'><img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa' onload='imgLoaded()'></div>";
        out += "<div class='col-2'>";
            out += "<img src='https://cutt.ly/IxR1RrQ' alt='https://bit .ly/3tI1rWa'>";
            out += "<div class='opts'>";
                out += "<button>add</button>";
                out += "<button>rm</button>";
            out += "</div>";
        out += "</div>";

        $(".row").html(out);

    });
}

function imgLoaded() {
    $(".opts").css("margin-top", $(".col-4").height();); 
}

.css效果在ajax響應(yīng)后未應(yīng)用

熱門(mén)問(wèn)答

統(tǒng)一中對(duì)象（圖像）之間的間隙

如何防止在文本和形狀之間畫(huà)一條額外的線？

提取的文件路徑。主文件夾子文件夾中的MP4文件到文本文件

不能將兩個(gè)值組合在一起？

當(dāng)我更改選項(xiàng)卡并返回時(shí)，所選項(xiàng)目的附加屬性將停止工作

類似aws s3這種桶有備份機(jī)制嗎？還是需要自己做備份？

VC2010中嵌入使用libtcc，編譯不通過(guò)提示，提示“error LNK2019: 無(wú)法解析的外部符號(hào) _tcc_delete”等

在Magento 1.4開(kāi)發(fā)中，如何通過(guò)jQuery AJAX GET獲取產(chǎn)品列表

python中讓用戶輸入一個(gè)參數(shù)

發(fā)生UPLOAD_ERR_INI_SIZE錯(cuò)誤時(shí)獲取嘗試上載的文件大小？

使用jest測(cè)試時(shí)，報(bào)navigator is not defined

angular字符串轉(zhuǎn)數(shù)字