ui-sref跳转后JQuery仅在页面重载时生效的问题

看起来你遇到的是单页应用（SPA）里常见的动态DOM事件绑定问题，我来帮你拆解原因和解决方案：

问题根源 #

你用ui-sref跳转是AngularUI Router的路由机制，它只会更新页面的局部DOM（新视图的内容），而不是重新加载整个页面。你的jQuery事件绑定（比如.click()或者插件初始化）是在初始index.html加载时执行的，这时候新视图的按钮还没出现在DOM里，自然绑定不上。刷新页面时，整个DOM重新渲染，绑定代码能找到目标按钮，所以就正常了。

解决方案 #

这里有几个靠谱的解决办法，按推荐程度排序：

1. 用Angular原生方式替代直接jQuery操作（最推荐）

既然是AngularJS项目，尽量遵循Angular的生命周期，避免直接用jQuery操作DOM和绑定事件。比如把按钮的交互改成ng-click：

<!-- 新视图里的按钮 -->
<button ng-click="openCompanyForm()">Add New Company</button>

然后在对应的控制器里实现逻辑：

app.controller('SCMCompanyWizardController', function($scope) {
  $scope.openCompanyForm = function() {
    // 原来用jQuery实现的show逻辑，比如用Angular的ng-show控制，或者调用服务
    // 示例：$scope.isFormVisible = true;
  };
});

Angular会在视图渲染完成后自动绑定ng-click，不管是路由跳转还是刷新页面，都能正常触发。

2. 使用jQuery事件委托

如果一定要用jQuery，就用事件委托把事件绑定到已经存在的父元素（比如新视图的静态父容器，而非document，性能更好）上，利用事件冒泡机制捕获动态元素的事件：

// 放在全局脚本或控制器初始化代码里
$('.static-parent-container').on('click', '.your-button-class', function() {
  // 这里写按钮的逻辑，比如$(this).show();
});

3. 监听路由视图加载完成事件

利用AngularUI Router的$viewContentLoaded事件，在新视图渲染完成后再初始化jQuery绑定：

app.controller('SCMCompanyWizardController', function($scope) {
  $scope.$on('$viewContentLoaded', function() {
    // 视图加载完成后，再绑定事件或初始化插件
    $('.your-button-class').click(function() {
      $(this).show();
    });
  });
});

这个方法能确保DOM已经存在后再执行绑定代码，避免找不到元素的问题。

总结 #

优先用Angular原生的指令和控制器逻辑，这样能更好地和SPA的路由机制配合，减少这类动态DOM的问题。如果必须用jQuery，事件委托是最稳妥的方式。

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