无冲突模式下jQuery .change()仅触发一次问题求助

咱们结合你提到的无冲突模式+排序场景，从几个最容易踩的坑入手排查：

1. 先确认无冲突模式的jQuery引用是否正确 #

既然用了无冲突模式，一定要保证全程没误用$符号（它可能已经被其他库占用了）。比如：

// 正确初始化无冲突模式，自定义别名
var $j = jQuery.noConflict();

// 绑定事件时必须用自定义别名，不能用$
$j('#sort-select').change(function() {
  // 你的排序逻辑
});

要是第一次触发后，后续代码不小心写成了$，会直接找不到元素，事件自然不会再触发。

2. 检查排序逻辑是否导致事件绑定丢失 #

如果你的排序是把div移除后重新插入DOM，要是select元素本身也被重新渲染了，那之前绑定的change事件就会失效（DOM元素被替换，事件跟着解绑）。这种情况用事件委托就能解决：

// 把事件绑定到不会被替换的父元素上，即使select被重写也能触发
$j('#固定的父容器ID').on('change', '#sort-select', function() {
  // 你的排序逻辑
});

事件委托是通过父元素捕获事件，不管子元素怎么被替换，事件都能正常触发。

3. 排查排序是否依赖了被修改的原始数据 #

很多人会犯这个错：第一次排序后直接修改了原始的DOM集合/数据数组，导致后续排序都是基于已经排好的结果，看起来像没触发事件。比如：

// 错误示例：$items第一次排序后就变成了排序后的集合
var $items = $j('.sortable-divs');
$j('#sort-select').change(function() {
  var sortType = $j(this).val();
  $items.sort(function(a,b) { /* 排序逻辑 */ });
  $j('#container').append($items);
});

解决办法是每次排序都从原始数据/元素出发：

// 正确示例：提前保存原始元素副本，每次排序都用新的副本
var originalItems = $j('.sortable-divs').clone(true);
$j('#sort-select').change(function() {
  var sortType = $j(this).val();
  var $items = originalItems.clone(true); // 每次拿原始副本排序
  $items.sort(function(a,b) {
    // 根据sortType编写排序逻辑
  });
  $j('#container').empty().append($items);
});

如果是基于数据数组排序，也要保证每次都从原始数组的副本开始处理，别直接修改原数组。

4. 检查事件处理函数是否阻止了后续触发 #

看看你的change函数里有没有写return false;或者event.stopPropagation();，虽然概率不高，但这类代码可能会意外影响事件的正常触发逻辑。

可以先从事件委托和原始数据这两个方向排查，这是这类场景下最常见的问题根源。

内容的提问来源于stack exchange，提问作者Boris Demerichsky