Question

在动态添加更多输入后，我似乎无法显示最近输入的建议框。

以下代码是我目前的位置，我可以看到新输入的建议框并添加到新输入但是如果我返回编辑输入数据，则建议框无法显示。

Output - Debug info: to None

Answer 1

Ok短版：

使用var box = $(e.target).next(".suggestion-box");获取对ajax请求的success处理程序中正确建议框的引用。

长版： 我用静态占位符替换了PHP部分以获得可运行的示例。

$(document).ready(function() {

  $("#add_test").on("click", function() {
    var input = '<div class="flavhey"><div class="flavourInput"><input class="ftext form-control flavour-name-input" type="text" name="flav-name-input" value="" placeholder="Flavour Name" /><div class="suggestion-box"></div></div></div>';
    $('#tester').append(input);
  });


  $(document).on('keyup', '.flavhey input', function(e) {
    var token = "[token]";
    var search = $(this).val();

    var box = $(e.target).next(".suggestion-box");
    box.show();
    box.html("TestData");
    box.css("background", "#FFF");

    return false;
  });

  $(document).on("click", ".search-flavour", function(e) {
    e.preventDefault();
    $(this).closest('.flavourInput').find('.flavour-name-input').val($(this).text());
    $('.suggestion-box').hide();
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tester"></div>
<button id="add_test">ADD</button>

<ul>
  <li class="search-flavour">
    <b>flavour_name_1</b> - <i>flavour_company_name_1</i>
  </li>
  <li class="search-flavour">
    <b>flavour_name_2</b> - <i>flavour_company_name_2</i>
  </li>
  <li class="search-flavour">
    <b>flavour_name_3</b> - <i>flavour_company_name_3</i>
  </li>
</ul>

现在能够执行您的代码我能够重现所描述的错误。
请尝试下次提供可运行的示例。

我意识到你的盒子只出现一次，因为对.show()的调用根本不起作用。
从一开始就可以看到没有任何内容，所以你看不到它，然后在设置html()后它有内容，看起来show()的调用按预期工作。

如果您点击.search-flavour所有框都被正确隐藏，从而再也没有出现过。

所以要解决这个问题，用这个替换ajax请求的成功处理程序：

success: function(data){
    // e.target is the currently active input element
    var box = $(e.target).next(".suggestion-box");
    box.show()
       .html(data)
       .css("background", "#FFF");
}

建议框未显示最近的输入

1 个答案: