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

首先要做的事情。你真的不应该在编程时混合语言。即使对于像我这样的本地Dutchie来说，阅读也是非常困惑的。我用英语等同替换了所有荷兰语单词。

就像A.沃尔夫说混合事件一样糟糕。所以让我们重组一些事情。

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

这个与我合作：

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

我没有尝试第二个，但它应该有用。

在ajax返回数据后用jquery更改div的高度

2 个答案: