ajax返回数据后用jquery改变div的高度答案

【问题标题】：Change height of div with jquery after ajax returns dataajax返回数据后用jquery改变div的高度
【发布时间】：2017-12-18 14:32:52
【问题描述】：

我有一个 div，它始终与它旁边的 div 高度相同（取决于该 div 中加载了多少内容等）。

这工作正常，但现在我使用 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 尝试过的：

$( "#zoeken" ).submit(function( event ) {
  // Stop form from submitting normally
  event.preventDefault();
  // Get some values from elements on the page:
  var $form = $( this ),
    zoekvalue = $form.find( 'input[name="zoekwaarde"]' ).val(),
    url = $form.attr( "action" );
  // Send the data using post
  var posting = $.post( url, { zoekwaarde: zoekvalue } );
  // Put the results in a div
  posting.done(function( data ) {
    $(window).resize(function() {
      var contenthoogte = $(".news-content").height();
      $(".contenthoogteaangepast").css("height", contenthoogte);
    }).resize();
    $("#result").html(data);

  });
});

即使不调整屏幕大小也应该改变它，所以我也尝试在 .resize 函数之外复制代码，但这也没有改变任何东西。

【问题讨论】：

您在设置#result 内容之前触发了调整大小事件。无论如何，你不应该嵌套事件

标签： javascript jquery css ajax

【解决方案1】：

首先要做的事情。你真的不应该在编程时混合语言。即使对于像我这样的土生土长的荷兰人来说，读起来也很混乱。我已将所有荷兰语单词替换为英语对应词。

就像 A. Wolff 所说的那样，混合事件很糟糕。所以让我们重组一些东西。

首先我删除了窗口调整大小并将其替换为对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();
  });
});

这种方法意味着您不会重复代码，而是将其捆绑在一个函数中，以便多次调用。

【讨论】：

【解决方案2】：

这个和我一起工作：

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

我没有尝试第二个，但它应该可以工作。

【讨论】：