Question

带有jquery的代码示例ALL此HTML部分也通过ajax加载：

<button> Lets Go </button>

    <select id='first'>
        <option value='1'> 1 </option>
        <option value='2'> 2 </option>
        <option value='3'> 3 </option>
    </select>

    <select id='second'>
    </select>


    $('button').click(function(){
        $('#first option[value=1]').prop('selected',true);// WORK
        $('#first').change();     //   WORK
        $('#second option[value=1]').prop('selected',true);// this DONT WORK
        $('#second').change();
    });

所以问题在这里，它试图选择选项，但数据尚未通过ajax加载，所以他没有选择...如何使用回调 $('#first').change();等待数据加载后继续下去???

    $('body').on('change','#first',function(){
         // on "#first" change the "#second" select automaticaly filled with code via ajax;
    so will be now like
        <select id='second'>
            <option value='1'> 1 </option>
            <option value='2'> 2 </option>
            <option value='3'> 3 </option>
        </select>
    })

    $('body').on('change','#second',function(){
       //   console.log() selected value dont see
    });

Answer 1

如果我正确理解了您的问题，您已为第一个select处理器执行AJAX请求的select元素分配了一个change事件侦听器。 AJAX请求本身就是异步意味着依赖于AJAX请求结果的代码必须等到请求完成。

所以，你有这样的事情:(不是真的，但这是一个更有意义的工作示例）

const select = document.querySelector('select');
const wrapper = document.querySelector('#wrapper');
const button = document.querySelector('button');

const simulHTML = v => `<div class="example">Example #${v}</div>`;
const simulAJAX = v => new Promise(r => setTimeout(_ => r(simulHTML(v)), 400));

$(select).change(async e => wrapper.innerHTML = await simulAJAX(e.target.value));
$(button).click(e => {
  select.value = "1";
  $(select).change();
  console.log(wrapper.innerHTML); // ""
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option disabled selected>---
  <option value="1">1
  <option value="2">2
  <option value="3">3
</select>
<button>button</button>
<div id="wrapper"></div>

一旦到了使用AJAX回调插入的HTML的时候，我们就会看到结果尚未到来。

现在，有几种方法可以解决这个问题，从快速和肮脏（和不安全）到更复杂（但更安全）。这是一个中间立场，我通常会选择。

首先，IIFE保持逻辑安全，不受页面其他部分的影响。在这里，我们将定义一个Set来保存侦听器，包含我们的更改侦听器的定义，一旦AJAX请求完成就执行侦听器，最后提供添加和删除侦听器的机制。

const listen = (_ => {
  const listeners = new Set();

  $(select).change(async e => {
    wrapper.innerHTML = await simulAJAX(e.target.value);
    listeners.forEach(e => e());
  });

  return {
    add: (...args) => listeners.add.bind(listeners)(...args),
    delete: (...args) => listeners.delete.bind(listeners)(...args)
  }
})();

接下来，要使用我们刚刚制作的内容，只需使用新add对象的delete和listen方法。

const listener = _ => {
    console.log(wrapper.innerHTML);
    listen.delete(listener); // remove after
}
listen.add(listener);

这是一个完整的工作示例：

const select = document.querySelector('select');
const wrapper = document.querySelector('#wrapper');
const button = document.querySelector('button');

const simulHTML = v => `<div class="example">Example #${v}</div>`;
const simulAJAX = v => new Promise(r => setTimeout(_ => r(simulHTML(v)), 400));

const listen = (_ => {
  const listeners = new Set();
  
  $(select).change(async e => {
    wrapper.innerHTML = await simulAJAX(e.target.value);
    listeners.forEach(e => e());
  });
  
  return {
    add: (...args) => listeners.add.bind(listeners)(...args),
    delete: (...args) => listeners.delete.bind(listeners)(...args)
  }
})();

$(button).click(e => {
  select.value = "1";
  $('select').change();
  
  const listener = _ => {
    console.log(wrapper.innerHTML);
    listen.delete(listener); // remove after
  }
  
  listen.add(listener);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option disabled selected>---
  <option value="1">1
  <option value="2">2
  <option value="3">3
</select>
<button>button</button>
<div id="wrapper"></div>

回调为change（）方法，称为ajax

1 个答案: