javascript - ajax返回数据后用jquery改变div的高度

Question

我有一个 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 函数之外的代码，但这也没有改变任何东西。

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

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