ajaxがデータを返すと、jqueryでdivの高さを変更します。

Question

divの横にあるdivと同じ高さです（そのdivに読み込まれるコンテンツの量によって異なります）。

これはうまくいきましたが、jqueryを使用して検索機能を追加したところ、動作が停止しました。検索すると、jqueryの計算で使用される要素が再度読み込まれます。だから、jQueryコードをajaxコールバックの中に追加しようとしましたが、これはうまくいきませんでした。私は何をすべきか？

マイコード：

$(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関数の外にコードをコピーしようとしましたが、これも何も変更されませんでした。

Answer 1

最初のものが最初です。あなたはプログラミングの際に実際に言語を混ぜ合わせるべきではありませ私のようなネイティブDutchieの場合でも、これは読むのが非常に混乱しています。私はオランダのすべての単語を英語の同等物に置き換えました。

Like A. Wolffは、イベントを混在させるのは悪いと言いました。だから、いくつかのことを再構成しましょう。

まず、ウィンドウのサイズ変更を削除し、resizeContainerを呼び出して置き換えました。この関数は、コンテナのサイズ変更を処理します。この関数は、window resizeイベントでも呼び出されます。

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(); 
    }); 
}); 

このアプローチでは、コードを繰り返すのではなく、複数回呼び出される関数にコードを組み込むことを意味します。

Answer 2

この1つは私と一緒に働いていた：

$("#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(); 

私は二番目を試していないが、それは動作するはずです。