jQuery UI 选择框在第二次输入时不起作用

Question

我正在做一个小项目，其中包括一个带有 jQuery 的自定义 selectbox。

问题是，在第一次 select 一个选项之后，就不可能 select 另一个选项了。

这是我的标记：

function bindSelectmenu() {
   $('form').each(function() {
        $(this).find('select').selectmenu({
            appendTo: $(this).find('select').parent()
        });
    });
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<form action="">
    <fieldset class="contact-flex">
        <label for="input" class="flex-grow-33">
            Selectbox
        </label>
        <div class="input flex-grow-66">
            <select name="input" id="input">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
            </select>
        </div>
        <span></span>
    </fieldset>
</form>

我正在使用 jQuery 3.6.0 和 jQuery UI。

Answer 1

考虑以下因素。

$(function() {
  $('form').each(function(i, el) {
    $('select', el).selectmenu({
      appendTo: $('select', el).parent()
    });
  });
});

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<form action="">
  <fieldset class="contact-flex">
    <label for="input" class="flex-grow-33">
            Selectbox
        </label>
    <div class="input flex-grow-66">
      <select name="input" id="input">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
      </select>
    </div>
    <span></span>
  </fieldset>
</form>

这与您正在使用的代码几乎相同，但它是在加载时执行的，而不是从函数中执行的。如果您需要从一个函数中运行它，您可以这样做，但最好更具体一些以确保 this 不会混淆。

Answer 2

我发现了问题，它是 body 上点击事件的 e.stopPropagation。当我删除它时它起作用了。

jQuery UI 选择框在第二次输入时不起作用

jQuery UI Selectbox doesn't work at second enter

html

javascript

jquery

jquery-ui

web