jQuery实现多按钮点击弹出不同配置Kendo Window弹窗方案咨询

问题原因 #

你使用$("button2")绑定事件失效，是因为这不是合法的jQuery选择器：type="button2"是你自定义的属性值，不是HTML原生的button标签名，因此无法匹配到对应元素。同时原代码重复初始化Kendo Window实例也会带来不必要的性能开销。

实现方案 #

推荐使用HTML5自定义data-*属性存储每个按钮的专属弹窗配置，复用同一个弹窗实例，逻辑更简洁也易维护：

步骤1：修改按钮代码（修正不规范的type属性，添加自定义配置） #

<div class="btn-toolbar">
  <button type="button" class="btn btn-primary btn mr-3" data-title="添加可回收物" data-content="add-recyclable.html">Add Recyclable</button>
  <button id="edit" type="button" class="btn btn-secondary btn mr-3" disabled data-title="编辑可回收物" data-content="edit-recyclable.html">Edit Recyclable</button>
  <button type="button" class="btn btn-primary custom btn mr-3" data-title="添加类型" data-content="add-type.html">Add Type</button>
  <button id="delete" type="button" class="btn btn-danger custom"  disabled data-title="删除确认" data-content="delete-confirm.html">Delete</button>
</div>

注：原生button的type属性仅支持button/submit/reset三个值，原自定义的button1/button2不符合HTML规范，已统一修正为标准值。

步骤2：修改JS逻辑，动态读取按钮配置更新弹窗 #

<div id="windowForAssign"></div>
<script>
var kendoWindowAssign = $("#windowForAssign");
// 预先初始化一次弹窗实例，避免重复初始化
kendoWindowAssign.kendoWindow({
  width: "650px",
  modal: true,
  height: '500px',
  iframe: true,
  resizable: false,
  visible: false,
});
const popup = kendoWindowAssign.data('kendoWindow');

// 绑定所有按钮点击事件
$('button').click(function() {
  // 读取当前点击按钮的自定义配置
  const currentTitle = $(this).data('title');
  const currentContent = $(this).data('content');
  // 更新弹窗配置
  popup.setOptions({
    title: currentTitle,
    content: currentContent
  });
  // 打开并居中弹窗
  popup.open();
  popup.center();
});
</script>

补充：单独绑定特定按钮的正确写法 #

如果不需要统一配置，要给某个按钮单独设置特殊逻辑，可按以下方式写选择器：

• 按id匹配（性能最优）：$('#edit').click(function() { /* 自定义逻辑 */ })
• 按自定义属性匹配（对应你原来的type自定义值）：$('button[type="button2"]').click(function() { /* 自定义逻辑 */ })

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