阿賈克斯返回數據後更改div的高度與jquery

我有一個div，它總是與它旁邊的div相同的高度（取決於有多少內容加載在該div等）。阿賈克斯返回數據後更改div的高度與jquery

這工作正常，但現在我添加了一個使用jQuery的搜索功能，它停止工作。當我搜索時，jquery計算中使用的元素再次被加載。所以我嘗試在ajax回調中添加jQuery代碼，但這也不起作用。我該怎麼辦？

我的代碼：

$(window).resize(function() { 
    var contenthoogte = $(".news-content").height(); 
    $(".contenthoogteaangepast").css("height", contenthoogte); 
}).resize();

我的HTML：

<div class="col-sm-4 padding-zero contenthoogteaangepast"> 
     <form action="ajax/result.php" id="zoeken"> 
      <div class="zoekveld"> 
       <input class="inputzoek" type="text" placeholder="zoeken..." name="zoekwaarde"> 
       <input class="inputbutton" type="submit" value="Zoeken"> 
      </div> 
     </form> 
     <div class="downloads"> 
      <h4>Downloads</h4> 
       <ul> 
        <li> 
         <a href="#">- PDF Voorbeeld 1</a> 
        </li> 
        <li> 
         <a href="#">- PDF Voorbeeld 2</a> 
        </li> 
        <li> 
         <a href="#">- PDF Voorbeeld 3</a> 
        </li> 
       </ul> 
     </div> 
    </div> 
    <div class="col-sm-8 padding-zero" id="result"> 
     <div class="box large-width-box-w1 full-width-box news-right entry-content news-content"> 
       <? 
       if($zoekwaarde != ''){ 
        $zoekresultcon = $conn->query($zoekresult); 
        while($zoekresult = $zoekresultcon->fetch_assoc()){ 
         $zoekresultaten .= '<div class="zoekresultaat"><h4>'.$zoekresult['title'].'</h4></div>'; 
        } 
        echo $zoekresultaten; 
       }else{ 
        ?> 
        <h2 class="port-tit contenttitle"><? echo $content['title']; ?></h2> 
        <? 

        //Replace img met img src="cms/ zodat je ook tussen de tekst images kan toevoegen 
        $replaced = str_replace('img src="','img src="cms/',$content['introtext']); 
        echo $replaced; 
       } 
       ?> 

     </div> 
    </div>

這是我嘗試使用Ajax：

應該改變，即使沒有調整畫面讓我也嘗試複製.resize函數外的代碼，但這也沒有改變任何東西。

來源

2017-12-18 twan

在設置'＃result'內容之前，您正在觸發調整大小事件。無論如何，你不應該築巢事件 –

第一件事第一件事。編程時你不應該混用語言。即使是像我這樣的土生土長的杜奇，這也是令人困惑的。我已將所有荷蘭語單詞替換爲英語等同物。

就像A.沃爾夫說混合事件是不好的。所以讓我們重組一些東西。

首先，我已經刪除了窗口大小調整並將其替換爲resizeContainer。此函數處理您的容器的大小調整。該函數也在窗口大小調整事件中調用。

function resizeContainer() { 
    var contentheight = $(".news-content").height(); 
    $(".contentheightaltered").css("height", contentheight); 
} 

$(window).resize(function() { 
    resizeContainer() 
}).resize(); 

$("#search").submit(function(event) { 
    // Stop form from submitting normally 
    event.preventDefault(); 
    // Get some values from elements on the page: 
    var $form = $(this), 
    searchvalue = $form.find('input[name="searchval"]').val(), 
    url = $form.attr("action"); 
    // Send the data using post 
    var posting = $.post(url, { searchval: searchvalue }); 
    // Put the results in a div 
    posting.done(function(data) { 
    $("#result").html(data); 
    // Resize the compagnion container AFTER the data has been updated 
    resizeContainer(); 
    }); 
});

此方法意味着您不重複代碼，而是將其捆綁到一個多次調用的函數中。

來源

2017-12-18 15:12:31 Lakitna

這一個曾與我：

$("#contenthoogteaangepast").on("changeHeight", function() { 
    $(this).height($("#.news-content").height()); 
}); 

//inside the callback of the request : 
$("#contenthoogteaangepast").trigger("changeHeight");

或嘗試：

function func() { 
    $(this).height($("#.news-content").height()); 
} 

//inside the callback of the request : 
func();

我沒有嘗試第二個，但它應該工作。

來源

2017-12-20 08:17:59

阿賈克斯返回數據後更改div的高度與jquery

回答

相關問題