Javascript 颜色选择器在模式内部不工作

我无法让我的颜色选择器在模式中工作。我已尝试更改z索引，并在modal show上添加事件处理程序。查看控制台日志并调试JavaScript后，我可以验证事件是否正常工作，但颜色值和滑块位置没有更新

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-body text-center">
              <div class="color_picker_dialog" draggable="false">
                     <div class="hue_bar">
                          <div class="hue_picker"> </div>
                      </div>
                      <div class="sat_rect" draggable="false">
                           <div class="white"></div>
                           <div class="black"></div>
                           <div class="sat_picker"></div>
                      </div>
                      <div class="bottom">
                           <div class="color_preview"></div>
                       <input type="text" onkeyup="changeHex(this.value)" value="#FF0000" />
                      </div>
                  </div>                      
             </div>
        </div>
    </div>
</div>

工作颜色选择器和非工作模式版本的快速示例：

---

如果您想利用模式内的颜色选择器事件，那么您可以*在显示模式后初始化侦听器和选择器逻辑

你可以通过使用

$('#myModal').on('shown.bs.modal', function() {
  // ... init all your modal here
});

工作示例：

注意，上面的代码不是内存泄漏保存，因为每次显示模式时都会添加侦听器。此时，您可以对代码进行修订，并重新考虑使用交互逻辑连接客户端组件的方式

编辑：您还可以使用

hidden.bs.modal

断开侦听器的连接并刷新变量

读数：

注意：

---

*我之所以写“可以”，是因为我不能100%确定这是唯一的方法，还是还有其他方法可以解决这个问题。

如果您想利用模式中的颜色选择器事件，那么您可以*在显示模式后初始化侦听器和选择器逻辑

你可以通过使用

$('#myModal').on('shown.bs.modal', function() {
  // ... init all your modal here
});

工作示例：

注意，上面的代码不是内存泄漏保存，因为每次显示模式时都会添加侦听器。此时，您可以对代码进行修订，并重新考虑使用交互逻辑连接客户端组件的方式

编辑：您还可以使用

hidden.bs.modal

断开侦听器的连接并刷新变量

读数：

注意：

---

*我之所以写“可以”，是因为我不能100%确定这是唯一的方法，还是还有其他方法可以解决这个问题。

这与模式无关，javascript只适用于页面上的一个颜色选择器@Sirence但是如果你只在模式中放置一个选择器，它也不会工作。它与模式无关，你的javascript只对页面上的一个颜色选择器工作@陛下，但是如果你只在模式中放置一个选择器，它也不会工作。谢谢！我正在show.bs.modal中添加事件处理程序。谢谢！我正在show.bs.modal中添加事件处理程序。