React项目动态渲染的Bootstrap下拉框不触发jQuery事件如何解决

问题根因 #

你当前使用的是jQuery的直接事件绑定，这种绑定方式只会在$(document).ready执行的那一刻，给已经存在于DOM树中的元素绑定事件。而你的下拉菜单是在address变量赋值后才通过React条件渲染动态插入DOM的，绑定执行时该元素还不存在，自然事件就不会生效。

解决方案1：修改jQuery事件绑定为委托模式（无需改动React代码，最快捷） #

把你现有的jQuery绑定代码改成事件委托写法，将事件绑定到页面初始化就一定存在的父级元素（比如document，也可以替换成你这个组件外层固定存在的容器选择器，性能更好），选择器参数指定你要触发事件的元素即可，修改后的代码如下：

$(document).ready(function () {
  // 把事件委托到document上，匹配所有.click-open3元素（包括后续动态插入的）
  $(document).on('click', '.click-open3', function () {
    $(".click-event3").toggleClass("displayblock");
    $(".click-event2").removeClass("displayblock");
    $(".click-event1").removeClass("displayblock");
  });
  $(document).on('click', '.click-open2', function () {
    $(".click-event2").toggleClass("displayblock");
    $(".click-event3").removeClass("displayblock");
    $(".click-event1").removeClass("displayblock");
  });
  $(document).on('click', '.click-open1', function () {
    $(".click-event1").toggleClass("displayblock");
    $(".click-event2").removeClass("displayblock");
    $(".click-event3").removeClass("displayblock");
  });
  $(document).on('click', '.burger-click', function () {
    $(".click-event1").removeClass("displayblock");
    $(".click-event2").removeClass("displayblock");
    $(".click-event3").removeClass("displayblock");
  });
});

这种写法的原理是事件冒泡：点击事件会一直向上冒泡到你绑定的父元素，再判断触发事件的元素是否匹配选择器，匹配就执行对应逻辑，所以不管元素是初始就有还是后续动态插入的，都能触发事件。

解决方案2：改用React原生事件处理（更符合React开发规范，推荐长期使用） #

你可以在组件内声明一个状态变量控制下拉菜单的显示隐藏，不需要依赖jQuery：

1. 首先在组件内声明状态：

const [showProfileDrop, setShowProfileDrop] = useState(false);
// 如果你有另外两个下拉也可以对应声明showDrop1、showDrop2状态

2. 给触发元素绑定React点击事件，修改类名为动态判断：

<a 
  className="profile-inr click-open3" 
  onClick={() => setShowProfileDrop(prev => !prev)}
>
  {/* 内部内容不变 */}
</a>
<div 
  className={`icon-hover-2 click-event3 ${showProfileDrop ? 'displayblock' : ''}`}
>
  {/* 下拉内容不变 */}
</div>

这种方式完全由React管理状态和DOM渲染，不会出现事件绑定失效的问题，也避免了jQuery和React同时操作DOM可能带来的状态冲突。

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