外部JS无法作用于script标签内的starrr div问题求助

我来帮你搞定这个问题！你遇到的核心问题其实不是模板在script标签里，而是模板里的元素还没被渲染成DOM节点时，你的外部JS就已经执行了，所以找不到.starrr元素。下面给你两个可行的解决方案：

方案一：保留原有模板，在Grid渲染完成后初始化starrr #

不需要移动模板，只要利用KendoGrid的dataBound事件，等所有行都渲染到页面后，再去初始化.starrr组件。

示例代码： #

// 初始化KendoGrid时添加dataBound事件
$("#yourGridId").kendoGrid({
  rowTemplate: kendo.template($("#techLangTemplate").html()),
  // 其他Grid配置（数据源、列等）...
  dataBound: function() {
    // 遍历Grid tbody里的所有.starrr元素，初始化它们
    this.tbody.find(".starrr").starrr();
  }
});

为什么这个方法有效？
dataBound事件会在Grid加载完数据、所有行都渲染到DOM之后触发，这时候.starrr元素已经真实存在于页面中，你的JS就能找到并操作它们了。

方案二：将模板移到外部JS文件 #

如果你确实想把模板从页面的script标签移到外部JS，也很简单——直接把模板定义成一个编译好的Kendo模板变量，不需要id和type属性。

步骤1：在外部JS文件（比如grid-templates.js）中定义模板： #

// 把模板字符串编译成Kendo模板，挂载到全局window对象方便调用
window.techLangTemplate = kendo.template(`
  <tr data-uid="#: uid #">
    <td class="name">#: name#</td>
    <td class="vote">
      <div class="starrr"></div>
    </td>
    <td class="actions"></td>
  </tr>
`);

步骤2：在页面的Grid初始化代码中引用这个模板： #

$("#yourGridId").kendoGrid({
  rowTemplate: window.techLangTemplate,
  // 其他Grid配置...
  dataBound: function() {
    // 同样要在dataBound里初始化starrr
    this.tbody.find(".starrr").starrr();
  }
});

注意：不管模板是在页面script里还是外部JS里，都必须等模板渲染成DOM元素后再操作.starrr，所以dataBound事件的初始化步骤不能少哦！

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